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 / peso

1. CSS
Structure, Specificity, Inheritance & The Cascade
Harold Maduro

2. ¿ 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

3. Specificity
Harold Maduro

4. 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

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

6. Specificity
p { color: red; }
Harold Maduro

7. Specificity
p { color: red; }
div p { color: green; }
Harold Maduro

8. Specificity
p { color: red; }
div p { color: green; }
div#content p { color: blue; }
Harold Maduro

9. Specificity
p { color: red; } 0,0,0,1
div p { color: green; } 0,0,0,2
div#content p { color: blue; } 0,1,0,2
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.
Harold Maduro

10. Specificity
p { color: red; } 0,0,0,1
div p { color: green; } 0,0,0,2
div#content p { color: blue; } 0,1,0,2
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.
Harold Maduro

11. Specificity
p { color: red; } 0,0,0,1
div p { color: green; } 0,0,0,2
div#content p { color: blue; } 0,1,0,2
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.
Harold Maduro

12. Specificity
p { color: red; } 0,0,0,1
div p { color: green } 0,0,0,2
.nota { color: red; } 0,0,1,0
p.alerta { color: red; } 0,0,1,1
#header { color: blue; } 0,1,0,0
div#content p { color: blue; } 0,1,0,2
Harold Maduro

13. Specificity
Las reglas agregadas inline, también tienen
un valor de specificity; mayor a los otros.
<p style=”color: blue;”>
Azul azul 1,0,0,0
</p>
Harold Maduro

14. Specificity
Lo 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

15. Specificity
Para 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

16. Importance
Harold Maduro

17. Reglas Importantes
!important
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 quot;important rulesquot; 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.
Harold Maduro

18. Reglas Importantes
!important
p.alerta {
color: red !important;
background: white;
}
Harold Maduro

19. Reglas Importantes
!important
p.alerta {
color: red !important;
background: white;
}
!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

20. Reglas Importantes
!important
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.
Harold Maduro

21. Reglas Importantes
p.alerta {
color: red !important;
<p class=”alerta”>
}
¡Soy una alerta!
p { color: blue; }
</p>
.alerta { color: yellow; }
html body .alerta { color: silver; }
Harold Maduro

22. Reglas Importantes
!important
Las reglas importantes, sin importar dónde fueron
agregadas, tienen un peso mayor que los estilos
aplicados inline en el HTML.
Harold Maduro

23. Universal selector
p.alerta {
<p class=”alerta” style=”color: blue;”>
color: red !important;
¡Soy una alerta!
}
</p>
Harold Maduro

24. Reglas Importantes
!important
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).
Harold Maduro

25. Inheritance
Harold Maduro

26. Inheritance
Los 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

27. 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

28. Inheritance
<p>
¡Soy una alerta!
p { color: red; }
<em>WAO</em>
Atender rápido.
</p>
Harold Maduro

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

30. Inheritance
Algunas propiedades no son heredadas.
Ejemplo de ellas son border, margin, padding, background.
Harold Maduro

31. Inheritance
La 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

32. The Cascade
Harold Maduro

33. The Cascade
CSS 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

34. 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

35. 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

36. 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

37. 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

38. 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

39. Ordenado por Peso y Origen
En 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

40. 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

41. 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

42. 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

43. Bibliografía
CSS: The Definitive Guide
Eric Meyer
Amazon: http://tinyurl.com/5hs7jf
Harold Maduro

44. Bibliografía
CSS 2.1 Specification
World Wide Web Consortium
http://www.w3.org/TR/CSS21/