CSSStructure, Specificity, Inheritance & The Cascade

Harold MaduroHarold Maduro

¿ Structure ?Para aplicar propiedades a cualquier elemento HTML en el documento, se toma en cuenta la inter relación entre estos mecanismos:

• specificity

• herencia

• importancia

• origen / peso

Harold Maduro

Specificity

Harold Maduro

Specificity

Para cada regla, el browser (user agent) evalúa el specificity del selector y le asigna un puntaje a cada selector en la regla.

Harold Maduro

Specificity

Este puntaje está separado en cuatro grupos de puntos, cada uno separdo por comas. Por ejemplo: 0,0,0,1

Harold Maduro

Specificity

p { color: red; }

Harold Maduro

Specificity

p { color: red; }

div p { color: green; }

Harold Maduro

Specificity

p { color: red; }

div p { color: green; }

div#content p { color: blue; }

Harold Maduro

Specificity

Dependiendo de los detalles del selector, cuántos elementos de HTML mencione, o si tiene IDs o Classes presente; se le van asignando puntos a cada grupo.

p { color: red; }

div p { color: green; }

div#content p { color: blue; }

0,0,0,1

0,0,0,2

0,1,0,2

Harold Maduro

Specificity

Luego, se gana la regla que tenga un mayor número en el grupo que esté más hacia la izquierda, en esta ocasión, la última regla.

p { color: red; }

div p { color: green; }

div#content p { color: blue; }

0,0,0,1

0,0,0,2

0,1,0,2

Harold Maduro

Specificity

Luego, gana la regla que tenga un mayor puntaje en el grupo de números que está más hacia la izquierda; en esta ocasión, la última regla.

p { color: red; }

div p { color: green; }

div#content p { color: blue; }

0,0,0,1

0,0,0,2

0,1,0,2

Harold Maduro

Specificity

p { color: red; }

div p { color: green }

.nota { color: red; }

p.alerta { color: red; }

#header { color: blue; }

div#content p { color: blue; }

0,0,0,1

0,0,0,2

0,0,1,0

0,0,1,1

0,1,0,0

0,1,0,2

Harold Maduro

Specificity

<p style=”color: blue;”>

Azul azul

</p>

1,0,0,0

Las reglas agregadas inline, también tienen un valor de specificity; mayor a los otros.

Harold Maduro

SpecificityLo importante que debemos recordar es:

• Los estilos aplicados inline (dentro del mismo tag de HTML) tienen el mayor puntaje y son tomados en cuenta por encima de cualquier otra regla.

• Cada uno de los items que se especifiquen en el selector, van sumando puntos. Dependiendo del tipo de item, tendrá un puntaje distinto.

• Los IDs tienen un puntaje mayor a todos los otros elementos.

• Los classes tienen puntaje menor a los IDs, pero mayor al resto de los elementos.

• Cada elemento de HTML (P, UL) y pseudo elemento (:hover) que se agregue, suma un puntaje. Aunque sean muchos elementos HTML agregados en la regla, la suma del puntaje de los mismos es siempre menor al puntaje que tengan los IDs o Classes.

• El Universal selector no gana puntaje, tiene puntaje de cero.

Harold Maduro

SpecificityPara conocer más al respecto, vea las páginas 60 y 61 del libro:

Cascading Style Sheets, The Definitive Guide

de Eric Meyer.

O visite el CSS 2.1 Spec:

http://www.w3.org/TR/CSS21/cascade.html#specificity

Harold Maduro

Importance

Harold Maduro

Reglas Importantes

Hay casos en que la regla es tan importante que debe invalidar o sopesar todas las otras reglas; sin importar su specificity.

Estas reglas son llamadas "important rules" y pueden ser marcadas con la frase !important antes de terminar la regla con el punto y coma.

Estas reglas van a tomar precedencia sobre cualquier otra regla para el mismo elemento.

!important

Harold Maduro

Reglas Importantes

p.alerta {

color: red !important;

background: white;

}

!important

Harold Maduro

Reglas Importantes

p.alerta {

color: red !important;

background: white;

}

!important

!important siempre va al final de la regla, antes del punto y coma.

Si se coloca mal, la regla queda invalida y no se toma en cuenta (no se aplica ninguna de las propiedades que se detallaron)

Harold Maduro

Reglas Importantes

En los casos en que exista un conflicto entre reglas que no tengan la etiqueta de importantes y reglas importantes, siempre va a ganar la regla marcada como importante.

!important

Harold Maduro

Reglas Importantes

p.alerta {

color: red !important;

}

p { color: blue; }

.alerta { color: yellow; }

html body .alerta { color: silver; }

<p class=”alerta”>

¡Soy una alerta!

</p>

Harold Maduro

Reglas Importantes

Las reglas importantes, sin importar dónde fueron agregadas, tienen un peso mayor que los estilos aplicados inline en el HTML.

!important

Harold Maduro

Universal selector

p.alerta {

color: red !important;

}

<p class=”alerta” style=”color: blue;”>

¡Soy una alerta!

</p>

Harold Maduro

Reglas Importantes

En el caso de que un usuario utilice un !important rule en su user style sheet; esta regla toma precedencia sobre los author style sheets.

Esto permite a usuarios con necesidades especiales utilizar el web correctamente (daltónicos, personas con vista reducida, etc).

!important

Harold Maduro

Inheritance

Harold Maduro

InheritanceLos documentos HTML en realidad siguen una estructura de árbol, con ancestros, descendientes, padres e hijos; muy parecido a un árbol genealógico.

En una familia de seres humanos, muchas cualidades son pasadas hacia los descendientes desde sus ancestros.

En el document tree, algunas propiedades de CSS son pasadas hacia abajo; desde los elementos ancestros, hacia sus descendientes. Esto se llama herencia o inheritance.

Harold Maduro

Inheritance

La herencia fue creada para no tener que especificar reglas de CSS para cada uno de los niveles de elementos en el document tree.

Por ejemplo, al aplicarle un color al texto de un UL, automáticamente se le aplica a todos los textos de los LIs que son descendientes de dicho UL.

Harold Maduro

Inheritance

p { color: red; }

<p>

¡Soy una alerta!

<em>WAO</em>

Atender rápido.

</p>

Harold Maduro

Inheritance

Las propiedades nunca son propagadas hacia arriba; un elemento nunca le pasa sus propiedades a sus ancestros.

Harold Maduro

Inheritance

Algunas propiedades no son heredadas.

Ejemplo de ellas son border, margin, padding, background.

Harold Maduro

InheritanceLa herencia no tiene ningún tipo de valor de specificity.

Esto significa, que si un elemento hereda una propiedad de su ancestro; y existe una regla que de alguna forma u otra modifica el comportamiento de este elemento; se aplica la nueva regla (no la heredada).

Esto incluye las reglas que trae el browser por default, como el color azul de los links, por ejemplo.

Harold Maduro

The Cascade

Harold Maduro

The CascadeCSS contiene una serie de reglas que permite al browser resolver conflictos cuando dos o más reglas son aplicadas al mismo elemento de HTML.

El browser debe considerar la herencia, el specificity y el origen de las declaraciones.

Este proceso de comparación es el que se denominada la cascada.

Harold Maduro

The Cascade

Las reglas se ordenan tomando en cuenta estos tres métodos para seleccionar cuál es la regla que se debe aplicar:

• Ordenado por peso y origen

• Ordenado por specificity

• Ordenado por orden de aparición en el style sheet

Harold Maduro

Ordenado por Peso y Origen

Cascading significa que los estilos pueden caer (como en una cascada) de un style sheet (hoja de estilo) a otra.

Esto permite utilizar varias hojas de estilo en conjunto para aplicarle estilos a un documento.

Harold Maduro

Ordenado por Peso y Origen

Si dos reglas se aplican a un mismo elemento; se escoge primero la regla que esté marcada como !important

Harold Maduro

Ordenado por Peso y Origen

Luego, se toma en cuenta el origen de la regla; ya sea el default browser style sheet, el user style sheet o el author style sheet.

author stylesheets > user style sheets > browser stylesheets

Harold Maduro

Ordenado por Peso y Origen

Si hay dos reglas que están en conflicto, una en el user style sheet y otra en el author style sheet; y ambas están marcadas como !important; entonces gana la regla del user style sheet.

Recuerden que esto le permite al usuario que tiene discapacidad tener los estilos que le permitan navegar el web apropiadamente.

Harold Maduro

Ordenado por Peso y OrigenEn cuanto al peso de la declaración, existen estos 5 niveles de importancia; desde el más importante hacia el menor:

1. User !important declarations

2. Author !important declarations

3. Author normal declarations

4. User normal declarations

5. Browser default style sheets declarations

Cualquier declaración que se haga va a tomar precedencia sobre el punto #5.

Harold Maduro

Ordenado por Specificity

Si hay un conflicto de varias reglas que apuntan al mismo elemento de HTML y todas tienen el mismo peso; entonces deben ser ordenadas por specificity, ganando la regla más específica según las especificaciones que ya vimos.

Harold Maduro

Ordenado por Orden de Aparición

Si dos reglas que están en conflicto tienen el mismo peso, origen y specificity; gana la que está más abajo en la hoja de estilos.

Harold Maduro

Ordenado por Orden de Aparición

h1 { color: red; }

h1 { color: blue; }

Como la segunda regla viene después o más adelante en la hoja de estilos; es la que gana y hace que los textos queden de color azul.

Harold Maduro

Bibliografía

CSS: The Definitive Guide

Amazon: http://tinyurl.com/5hs7jf

Eric Meyer

Harold Maduro

Bibliografía

CSS 2.1 SpecificationWorld Wide Web Consortium

http://www.w3.org/TR/CSS21/