css 4 - structure, specificity, inheritance & the cascade
DESCRIPTION
Curso de Estándares Web - Día #5 Elementos que se toman en cuenta al momento de aplicar una regla a un elemento: * specificity * herencia * importancia * origen / pesoTRANSCRIPT
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/