La cascade
Valeur des propriétés
Traitement d’un document par le navigateur
-
Le navigateur parcourt le document et construit l’arborescence correspondante
-
Distribution des propriétés de style pour chaque nœud de l’arbre selon le média concerné
Valeur d'une propriété
Détermination de la valeur spécifiée
-
Détermination par le mécanisme de la cascade, de la règle applicable à un élément pour une propriété donnée.
- Si une telle règle existe, elle constitue la valeur spécifiée pour la propriété.
- Dans le cas contraire, s’il s’agit d’une propriété héritée, c’est la valeur de la propriété calculée pour l’élément parent.
-
Si la propriété n’est pas héritée, c’est la valeur initiale, définie par défaut pour le navigateur, qui constitue la valeur spécifiée.
Valeur calculée
-
Si la valeur spécifiée est absolue elle constitue alors la valeur calculée sans subir de modification.
- Si la valeur spécifiée est relative à une autre grandeur, un calcul est nécessaire pour obtenir une valeur calculée absolue
Valeur Réelle
- Si la valeur calculée est directement applicable dans l’environnement, elle constitue la valeur réelle
- Dans le cas ou la valeur calculée n’est pas applicable en l’état, une approximation de celle-ci constitue la valeur réelle. C’est typiquement le cas pour le calcul d’une dimension qui doit être donnée par un nombre entier de pixels ou pour le choix d’une taille de police selon celles disponibles pour le navigateur.
L'héritage
- La possibilité pour une propriété d’être héritée ou non, dépend exclusivement de la spécification de celle-ci. Ainsi la propriété de couleur du texte est héritée, tandis que les propriétés de marge ne le sont pas.
- Généralement c’est la valeur calculée qui est héritée du parent, mais pour quelques rares propriétés c’est la valeur spécifiée qui est héritée. Par exemple line-height qui se rapporte à la taille de police de l’élément lui même hérite de sa valeur spécifiée.
- Ce mécanisme d’héritage permet de spécifier un comportement par défaut pour tout un document en spécifiant une valeur au niveau de la racine. Ainsi la règle : body {color : #006600 ;} permet d’afficher le texte en vert, par défaut, pour tout le document, sauf pour les éléments auxquels s’applique une règle contraire.
- Il est possible de forcer l’héritage d’une propriété en spécifiant la valeur « inherit ».
Les propriétés héritées
- color
- propriétés font
- letter-spacing
- line-height
- propriétés list-style
- text-align
- text-indent
- text-transform
- white-space
- word-spacing
La cascade
Le mécanisme de la cascade permet de déterminer quelle valeur sera prise en compte pour une propriété donnée. Une multitude de valeurs possibles peuvent être en concurrence, selon le média concerné, l'origine des feuilles de style et la spécificité des sélecteurs.
Origine des feuilles de style
- Feuiles de styles auteur incorporées ou liées
- Feuille de style utilisateur
- La feuille de style par défaut du navigateur
La mention !important
La mention !important peut être rajoutée à la définition d'une propriété par l’auteur ou l’utilisateur pour lui conférer un poid plus important et modifier l’ordre de prise en compte des règles :
selecteur
{
propriété : valeur !important;
}
Ordre de la cascade
Sélection par média
Détermination de l'ensemble des règles applicables à l’élément pour le media concerné. Ce sont celles dont le sélecteur correspond à l’élément pour le media concerné.
Priorité selon l'origine et le poids
- Styles par défaut de l'agent utilisateur
- Styles normaux de l'utilisateur
- Styles normaux de l'auteur
- Styles de l'auteur marqués !important
- Styles de l'utilisateur marqués !important
Priorité selon la spécificité des sélecteurs
Parmis les definitions restant en concurrence, la priorité est accordée aux sélecteurs les plus spécifiques
Détermination de la spécificité d'un sélecteur
La spécificité d'un sélecteur est déterminée par un triplet (a, b , c)
Calcul du triplet (a, b , c)
- a = nombre d'id présent
- b = nombre de classes, d'attributs et de peudo-classes
- c = nombre d'éléments
Exemples
| Sélecteur |
a |
b |
c |
| * |
0 |
0 |
0 |
| h1 |
0 |
0 |
1 |
| div p |
0 |
0 |
2 |
| div>p |
0 |
0 |
2 |
| .classe |
0 |
1 |
0 |
| p.classe |
0 |
1 |
1 |
| div p.classe |
0 |
1 |
2 |
| div.menu p.actif |
0 |
2 |
2 |
| #identifiant |
1 |
0 |
0 |
| div#identifiant |
1 |
0 |
1 |
| div.classe p#identifiant |
1 |
1 |
2 |
Règles de priorité
- La valeur affectée à une propriété au sein d’un élément par l’attribut style est prioritaire sur toute autre déclaration.
- Si une propriété n’est pas définie par l’attribut style, alors c’est le sélecteur dont le triplet (a, b, c) est le plus élevé qui est pris en compte pour déterminer la valeur de la propriété, le poid de a étant plus élevé que celui de b et celui de b plus élevé que celui de c.
Remarque
- Bien qu’un sélecteur de balise enfant soit conceptuellement plus spécifique qu’un sélecteur de descendant, la même priorité leur est accordé selon les règles de la cascade. Ainsi div>p qui concernent tous les paragraphes enfants de div , bien que plus spécifique que div p qui concernent tous les descendants p d’un div à quelque profondeur que ce soit ont la même priorité.
Liens
