6 Asignación de valores a las propiedades, Cascada y Herencia

Contenidos

6.1 Valores especificados, computados y reales

Una vez que una aplicación del usuario ha analizado un documento y construido una estructura del documento, debe asignar, para cada elemento de la estructura, un valor por cada propiedad que es aplicada a los tipos de medios a los cuales se dirige.

El valor final de una propiedad es el resultado de un cálculo en tres pasos: el valor se determina por medio de la especificación (el "valor especificado"), luego resuelto a un valor absoluto si es necesario (el "valor computado"), y finalmente transformado de acuerdo a las limitaciones del entorno local (el "valor real").

6.1.1 Valores especificados

Las aplicaciones del usuario deben primero asignar un valor especificado para una propiedad basadas en los siguientes mecanismos (en orden de precedencia):

  1. Si la cascada da como resultado un valor, lo usa.
  2. De lo contrario, si la propiedad es heredada, usa el valor del elemento padre, generalmente el valor computado.
  3. De otro modo, usa el valor inicial de la propiedad. El valor inicial de cada propiedad es indicado en la definición de la propiedad.

Puesto que no tiene ningún padre, la raíz de la estructura del documento no puede utilizar valores del elemento padre; en este caso, se usa el valor inicial si es necesario.

6.1.2 Valores computados

Los valores especificados pueden ser absolutos (es decir, no se especifican con relación a otro valor, como en 'red' o '2mm') o relativos (es decir, son especificados con relación a otro valor, como en 'auto', '2em' y '12%'). Para los valores absolutos, no es necesario ningún cálculo para encontrar el valor computado.

Los valores relativos, por otro lado, deben ser transformados en valores computados: los porcentajes deben ser multiplicados por un valor de referencia (cada propiedad define qué valor es ése), los valores con unidades relativas (em, ex, px) deben convertirse en absolutos multiplicándolos por el tamaño adecuado de la fuente o el pixel, los valores 'auto' deben ser computados con las fórmulas dadas con cada propiedad, ciertas palabras clave ('smaller', 'bolder', 'inherit') deben ser reemplazadas de acuerdo a sus definiciones.

En la mayoría de los casos, los elementos heredan los valores computados. Hay, sin embargo, algunas propiedades cuyo valor especificado puede heredarse (ej., el valor numérico de la propiedad 'line-height'). En los casos donde los elementos hijos no heredan el valor computado, esto se describe en la definición de la propiedad.

6.1.3 Valores reales

Un valor computado está en principio listo para ser usado, pero una aplicación del usuario puede no estar en condiciones de hacer uso del valor en un ámbito determinado. Por ejemplo, una aplicación del usuario sólo puede procesar los bordes con un ancho expresado en pixeles enteros y por consiguiente debe aproximar el ancho computado. El valor real es el valor computado después de cualquier aproximación que le haya sido aplicada.

6.2 Herencia

Algunos valores son heredados por los hijos de un elemento en la estructura del documento. Cada propiedad define si se hereda o no.

Suponga que hay un elemento H1 con un elemento enfatizado (EM) adentro:

<H1>El título <EM>es</EM> importante!</H1>

Si no se ha asignado ningún color al elemento EM, el énfasis en "es" heredará el color del elemento padre, de modo que si H1 tiene un color azul, el elemento EM será igualmente azul.

Para poner una propiedad de estilo "predeterminada" en un documento, los autores pueden especificar la propiedad en la raíz de la estructura del documento. En HTML, por ejemplo, los elementos HTML o BODY pueden servir para esta función. Observe que esto servirá aún cuando el autor omita la marca BODY en la fuente HTML debido a que el analizador HTML inferirá la marca ausente.

Ejemplo(s):

Por ejemplo, como la propiedad 'color' es heredada, todos los descendientes del elemento BODY heredarán el color 'black':

BODY { color: black; }

Los valores de porcentaje especificados no son heredados; los valores computados sí lo son.

Ejemplo(s):

Por ejemplo, dada la siguiente hoja de estilo:

BODY { font-size: 10pt }
H1 { font-size: 120% }

y este fragmento del documento:

<BODY>
  <H1>Un <EM>gran</EM> titular</H1>
</BODY>

la propiedad 'font-size' del elemento H1 tendrá el valor computado '12pt' (el 120% de 10pt, el valor del padre). Como el valor computado de 'font-size' es heredado, el elemento EM tendrá el valor computado '12pt' también. Si la aplicación del usuario no tiene la fuente de 12pt disponible, el valor real de 'font-size' para H1 y también para EM podría ser, por ejemplo, '11pt'.

6.2.1 El valor 'inherit'

Cada propiedad también puede tener un valor especificado como 'inherit', lo cual significa que, para un elemento determinado, la propiedad toma el mismo valor computado que la propiedad del padre del elemento. El valor heredado, que normalmente sólo se usa como un valor de respaldo, puede ser reforzado poniendo explícitamente 'inherit'.

Nota de la traducción:
En la versión original se aclara que el valor 'inherit' se aplica aún a las propiedades cuyo valor no sería de otro modo heredado.

Ejemplo(s):

En el ejemplo de abajo, las propiedades 'color' y 'background' son definidas para el elemento BODY. En todos los demás elementos, el valor de 'color' será heredado y el fondo será transparente. Si estas reglas son parte de la hoja de estilo del usuario, el texto negro sobre un fondo blanco será forzado en todo el documento.

BODY { 
  color: black !important; 
  background: white !important;
}

* { 
  color: inherit !important; 
  background: transparent;
}

6.3 La regla @import

La regla '@import' permite a los usuarios importar hojas de estilo desde otras hojas de estilo. Cualquier regla @import debe preceder a todas las reglas especificadas en una hoja de estilo. La palabra clave '@import' debe ir seguida por el URI de la hoja de estilo a incluir. También se permite una cadena; será interpretada como si contuviera url(...) en torno a ella.

Ejemplo(s):

Las siguientes líneas son equivalentes en su significado e ilustran ambas sintaxis de '@import' (una con "url()" y otra con sólo una cadena:

@import "mystyle.css";
@import url("mystyle.css");

Para que las aplicaciones del usuario puedan evitar recuperar recursos para los tipos de medios no soportados, los autores pueden especificar reglas @import dependientes de los medios. Estas importaciones condicionales especifican los tipos de medios, separados por comas, después del URI.

Ejemplo(s):

Las siguientes reglas tienen el mismo efecto que si la hoja de estilo importada hubiera sido cubierta por una regla @media para el mismo medio, pero puede ahorrar a la AU una transmisión infructuosa.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

En ausencia de cualquier tipo de medios, la importación es incondicional. La especificación de 'all' para el medio tiene el mismo efecto.

6.4 Cascada

Las hojas de estilo pueden tener tres orígenes diferentes: el autor, el usuario y la aplicación del usuario.

Las hojas de estilo con estos tres orígenes se superpondrán en su acción e interactuarán de acuerdo a la cascada.

La cascada de CSS, asigna una fuerza a cada regla de estilo. Cuando varias reglas se aplican, la de mayor fuerza toma preponderancia.

De forma predefinida, las reglas en las hojas de estilo del autor tienen más fuerza que las reglas en las hojas de estilo del usuario. La preponderancia se revierte, sin embargo, con la reglas "!important". Todas las reglas que el usuario y el autor especifican tienen mayor fuerza que las reglas de la hoja de estilo predeterminada en la AU.

Las hojas de estilo importadas también forman la cascada y su fuerza depende del orden en la importación. Las reglas especificadas en una hoja de estilo dada sustituyen las reglas importadas desde otras hojas de estilo. Las hojas de estilo importadas pueden a su vez importar y sustituir otras hojas de estilo, recursivamente, y se aplican las mismas reglas de preponderancia.

6.4.1 Orden de la cascada

Para encontrar el valor para una combinación elemento/propiedad, las aplicaciones del usuario deben aplicar el siguiente orden de disposición:

  1. Hallar todas las declaraciones que se aplican al elemento y la propiedad en cuestión, para el tipo de medio al que está dirigido. Las declaraciones se aplican si el selector asociado coincide con el elemento en cuestión.
  2. La primera disposición de las declaraciones se hace por fuerza y origen: para las declaraciones normales, las hojas de estilo del autor sustituyen las hojas de estilo del usuario que sustituye la hoja de estilo predeterminada. Para las declaraciones "!important", las hojas de estilo del usuario sustituyen las hojas de estilo del autor que sustituyen la hoja de estilo predeterminada. La declaración "!important" sustituye a las declaraciones normales. Una hoja de estilo importada tiene el mismo origen que la hoja de estilo que la ha importado.
  3. La segunda disposición es por la especificidad del selector: los selectores más específicos sustituirán a los más generales. Los pseudo-elementos y las pseudo-clases se cuentan como elementos y clases normales respectivamente.
  4. Finalmente, se dispone por el orden especificado: si dos reglas tienen la misma fuerza, origen y especificidad, la última en ser especificada vence. Las reglas en las hojas de estilo importadas se considera que están antes que cualquier regla en la propia hoja de estilo.

Fuera de la definición de "!important" para las declaraciones individuales, esta estrategia le otorga a las hojas de estilo del autor mayor fuerza que a las del lector. Por eso es importante que la aplicación del usuario le brinde al usuario la posibilidad de neutralizar la influencia de determinada hoja de estilo, por ej., a través de un menú desplegable.

6.4.2 Las reglas !important

CSS intenta establecer un balance de poder entre las hojas de estilo del autor y del usuario. De modo predefinido, las reglas en una hoja de estilo del autor sustituye las de la hoja de estilo del usuario (ver regla 3 de cascada).

Sin embargo, para balancear, una declaración "!important" (las palabras clave "!" e "important" siguiendo a la declaración) toman preponderancia sobre una declaración normal. Ambas hojas de estilo, las del autor y las del usuario, pueden contener declaraciones "!important", y las reglas "!important" del usuario sustituyen a las reglas "!important" del autor. Esta característica mejora la accesibilidad de los documentos dándole a los usuarios con requerimientos especiales (fuentes grandes, combinaciones de colores, etc.) el control sobre la presentación.

Nota. Este es un cambio semántico sobre CSS1. En CSS1, las reglas "!important" del autor tomaban preponderancia sobre las reglas.

La declaración de una propiedad resumida (ej., 'background') como "!important" equivale a declarar todas sus sub-propiedades como "!important".

Ejemplo(s):

La primer regla en la hoja de estilo del usuario en el ejemplo siguiente contiene una declaración "!important", que sustituye a la correspondiente declaración en la hoja de estilo del autor. La segunda declaración también resultará vencedora debido a que a sido marcada como "!important". Sin embargo, la tercer regla en la hoja de estilo del usuario no es "!important" y entonces perderá con la segunda regla en la hoja de estilo del autor (que definió el estilo en una propiedad resumida). Asimismo, la tercer regla del autor perderá con la segunda regla del autor debido a que la segunda regla es "!important". Esto muestra que las declaraciones "!important" tienen la misma función también dentro de las hojas de estilo del autor.

/* De la hoja de estilo del usuario */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* De la hoja de estilo del autor */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }

6.4.3 Cálculo de la especificidad de un selector

La especificidad de un selector se calcula como sigue:

La concatenación de los tres números a-b-c (en un sistema numérico de base mayor) proporciona la especificidad.

Ejemplo(s):

Algunos ejemplos:

*             {}  /* a=0 b=0 c=0 -> especificidad =   0 */
LI            {}  /* a=0 b=0 c=1 -> especificidad =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> especificidad =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> especificidad =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> especificidad =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> especificidad =  13 */ 
LI.red.level  {}  /* a=0 b=2 c=1 -> especificidad =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> especificidad = 100 */ 

En HTML, los valores del atributo "style" de un elemento son reglas de la hoja de estilo. Estas reglas no tienen selectores, pero para el propósito del paso 3 del algoritmo de cascada, se considera que tienen un selector ID (especificidad: a=1, b=0, c=0). Para el propósito del paso 4, se considera que están después de todas otras reglas.

<HEAD>
<STYLE type="text/css">
  #x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>

En el ejemplo de arriba, el color del elemento P sería rojo. Aunque la especificidad es la misma para ambas declaraciones, la declaración en el atributo "style" sustituye a la del elemento STYLE debido a la regla 4 de la cascada.

6.4.4 Precedencia de las indicaciones de presentación fuera de CSS

La AU puede elegir cumplir con las indicaciones de presentación de otras fuentes aparte de las hojas de estilo, por ejemplo, el elemento FONT o el atributo "align" en HTML. Si es así, las indicaciones de presentación fuera de CSS deben ser traducidas a las correspondientes reglas CSS con una especificidad igual a cero. Se asume que las reglas están al comienzo de la hoja de estilo del autor y pueden ser sustituidas por las reglas subsecuentes de la hoja de estilo

Nota. En una fase de transición, esta política facilitará que los atributos estilísticos co-existan con las hojas de estilo.

Nota. En CSS1, a las indicaciones de presentación fuera de CSS se les otorgaba una especificidad igual a 1, no igual a 0. El cambio se debe a la introducción del selector universal, que tiene una especificidad de 0.

Copyright  ©  1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.

Traducción: Carlos Benavidez