Les feuilles de style ont trois origines différentes : l'auteur, l'utilisateur et l'agent utilisateur.
L'auteur : produit des feuilles de style pour un document source selon les conventions du langage de ce document. Par exemple en HTML, celles−ci peuvent être incorporées dans le document ou reliées à celui−ci.
•
L'utilisateur : peut être capable d'indiquer une information de style pour un document particulier. Par exemple, celui−ci peut désigner une feuille de style contenue dans un fichier ou un agent utilisateur peut fournir l'interface pour produire une feuille de style personnelle (ou faire comme s'il l'avait fait).
•
L'agent utilisateur: l'agent utilisateur conforme doit appliquer sa feuille de style par défaut (ou faire comme s'il l'avait fait) avant toutes les autres feuilles de style d'un document. Cette feuille de style devrait présenter les éléments du langage du document de façon à satisfaire au rendu généralement admis pour ceux−ci dans ce langage. Par exemple, pour des navigateurs visuels, l'élément EM en HTML est rendu avec une police en italique. Voir l'appendice A pour une feuille de style par défaut recommandée pour les documents HTML 4.0.
•
Noter que cette feuille de style par défaut peut varier si l'utilisateur change les réglages de son système (ex. les couleurs du système). Cependant, il peut être impossible de modifier les valeurs de celle−ci, en raison d'une implémentation réduite de l'agent utilisateur.
Les champs d'action de ces trois feuilles de style vont se recouper, leur interaction dépendant des règles de la cascade.
La cascade de CSS définit un ordre de priorité, ou poids, pour chaques règles de style. Quand plusieurs règles sont mises en œuvre, celle avec le plus grand poids a préséance.
Les règles des feuilles de style de l'auteur ont, par défaut, plus de poids que celles de l'utilisateur. Au contraire, l'ordre de priorité est inversé pour les règles "!important". Les règles d'un auteur et d'un utilisateur sont prioritaires sur celles de la feuille de style par défaut de l'agent utilisateur.
Les feuilles de style importées suivent aussi la cascade, leur poids dépendant de leur ordre d'importation. Des règles étant spécifiées dans une feuille de style donnée, celles−ci remplacent les règles de même poids importées d'une autre feuille de style. Les feuilles de style importées peuvent elles−même importer et remplacer d'autres feuilles de style, récursivement, les mêmes règles de préséance leur étant appliquées.
6.4.1 L'ordre de cascade
Pour trouver la valeur d'une combinaison élément/propriété, les agents utilisateurs doivent suivre l'ordre de tri suivante :
Trouver toutes les déclarations qui concernent l'élément et la propriété en question, pour le type de média visé. Celles−ci s'appliquent si le sélecteur correspond à cet élément ;
1.
Un tri primaire est effectué sur les déclarations selon leur poids et leur origine : pour une déclaration normale, les feuilles de style de l'auteur surclassent celles de l'utilisateur, ces dernières surclassant la feuille de style par défaut. Pour une déclaration avec "!important", celles−ci surclassent les déclarations normales. Une feuille de style importée est réputée avoir la même origine que celle qui l'a importée ; 2.
Un tri secondaire est effectué selon la specificité des sélecteurs : les plus spécifiques surclasseront ceux plus généraux. Les pseudo−éléments et les pseudo−classes sont considérés respectivement comme des éléments et des classes normaux ;
3.
Un tri final selon l'ordre de spécification : si deux règles ont les mêmes poids, origines et spécifités, c'est la dernière survenue qui l'emporte. Les règles issues de feuilles de style importées sont considérées comme étant survenues avant chacune de celles de la feuille de style elle−même.
4.
Mis à part le cas de la valeur "!important" attachée à certaines déclarations individuelles, cette stratégie donne aux feuilles de style de l'auteur priorité sur celles de l'utilisateur. C'est pourquoi, il est important que l'agent utilisateur lui laisse la possibilité de neutraliser l'effet d'une feuille de style donnée (ex. au moyen d'un menu déroulant).
6.4.2 Les règles avec la valeur !important
CSS essaye de préserver un équilibre entre les prérogatives de l'auteur et celles de l'utilisateur. Par défaut, les règles d'une feuille de style de l'auteur surclassent celles de l'utilisateur (voir la règle de cascade numéro 3).
Par souci d'équilibre, les déclarations avec "!important" (les mots−clés "!" et "important" suivent la déclaration) établissent ainsi leur préséance sur les déclarations normales. Aussi bien les feuilles de style de l'auteur que celles de l'utilisateur peuvent contenir des déclarations avec "!important", celles de l'utilisateurs ayant priorité. Cette fonction de CSS améliore l'accessibilité des documents, offrant à ceux des utilisateurs qui ont des besoins particuliers (une grande taille de police, d'autres combinaisons de couleur, etc.), une certaine maîtrise de la présentation.
Note : Voici un changement sémantique par rapport à CSS1. Dans cette spécification−là, les règles avec
"!important" d'un auteur avaient préséance sur celles de l'utilisateur.
Le fait de déclarer une propriété raccourcie (ex. 'background') avec la valeur "!important" confère ce poids à toutes ses sous−propriétés.
Exemple(s) :
Dans l'exemple ci−dessous, la première règle de la feuille de style de l'utilisateur comporte une déclaration
"!important", celle−ci surclasse la déclaration correspondante dans la feuille de l'auteur. La deuxième va également l'emporter, étant marquée "!important". Cependant, en l'absence de cette marque, la troisième de l'utilisateur ne sera pas retenue, au profit de la deuxième de l'auteur (par ailleurs, un style appliqué avec une propriété raccourcie). Autrement, sur la deuxième et la troisième règle de l'auteur, c'est la deuxième qui sera retenue, la troisième n'étant pas marquée "!important". Ceci montre que ce genre de déclaration a bien une fonction, même au sein des feuilles de style de l'auteur.
/* Extrait de la feuille de style de l'utilisateur */
P { text−indent: 1em ! important } P { font−style: italic ! important } P { font−size: 18pt }
/* Extrait de la feuille de style de l'auteur */
P { text−indent: 1.5em !important } P { font: 12pt sans−serif !important } P { font−size: 24pt }
6.4.3 Le calcul de la spécifité d'un sélecteur La spécifité d'un sélecteur est déterminée comme suit :
dans le sélecteur, compter le nombre d'attributs Id (= a) ;
•
puis celui des autres attributs et des pseudo−classes (= b) ;
•
et ensuite le nombre de noms des éléments (= c) ;
•
ignorer les pseudo−elements.
•
Assembler les trois nombres a−b−c (dans un système de nombre avec une base étendue) pour obtenir la spécificité.
Exemple(s) :
Des exemples :
* {} /* a=0 b=0 c=0 −> specificité = 0 */
LI {} /* a=0 b=0 c=1 −> specificité = 1 */
UL LI {} /* a=0 b=0 c=2 −> specificité = 2 */
UL OL+LI {} /* a=0 b=0 c=3 −> specificité = 3 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 −> specificité = 11 */
UL OL LI.red {} /* a=0 b=1 c=3 −> specificité = 13 */
LI.red.level {} /* a=0 b=2 c=1 −> specificité = 21 */
#x34y {} /* a=1 b=0 c=0 −> specificité = 100 */
Pour HTML, les valeurs de l'attribut "style" sont des règles de feuille de style. Ces règles n'ont pas de sélecteurs, mais dans l'optique du point 3 de l'algorithme de cascade, on considère qu'elles ont un sélecteur d'ID (specificité : a=1, b=0, c=0). Et dans l'optique du point 4, on considère qu'elles surviennent après toutes les autres règles.
<HEAD>
<STYLE type="text/css">
#x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>
Dans l'exemple ci−dessus, l'élément P aura la couleur rouge. Bien que la specificité soit la même pour les deux déclarations, la valeur dans la règle de l'attribut "style" surclassera celle qui lui correspond de l'élément STYLE du fait du point 4 des règles de cascade.
Note : La specificité est seulement basée sur la forme du sélecteur. En effet, un sélecteur de la forme "[id=p33]"
est compté comme un sélecteur d'attribut (a=0, b=1, c=0), même si l'attribut "id" est défini comme un "ID" dans le DTD du document source.
6.4.4 L'ordre de priorité des indications de présentation en dehors de CSS
L'agent utilisateur peut privilégier les indications de présentation provenant d'autres sources que les feuilles de style, par exemple l'élément FONT ou l'attribut "align" en HTML. Dans ce cas, ces indications doivent être traduites dans leurs règles équivalentes de CSS avec une specificité égale à zéro. Ces règles sont sensées se trouver au début de la feuille de style de l'auteur, permettant leur surclassement par les règles subséquentes de cette feuille de style.
Note : Durant une période de transition, cette manière de faire facilitera la coexistence des attributs stylistiques et des feuilles de style.
Note : Pour CSS1, ces indications de présentations en dehors de CSS avaient une specificité égale à 1, et non O.
Ce changement est du à l'introduction du sélecteur universel, qui a une specificité de 0.