Introduction

Premièrement analysons la manière dont est gérée l'ordre de priorité des règles CSS.

Il existe différent types de propriété définissant la valeur d'une propriété CSS. La sélection du style le plus important se fait en comparant la propriété la plus importante, et en descendant à une propriété de moindre niveau si il y a une égalité.

La présence du mot-clé "!important"

Une règle présentant le mot-clé !important dépasse toutes les autres règles ne le possédant pas.

Ainsi : * { color: black !important; } a la priorité sur A.className#ID:hover { color: red; }

L'endroit où la règle est indiquée

L'endroit où est indiquée la règle est le deuxième critère utilisé.

Il existe normalement deux degrés prévus par W3C. Le premier et donc le plus important est le style défini en HTML sur la balise, via l'attribut STYLE. Le deuxième concerne les règles CSS, qui ont une valeur moidre.

Ensuite, sous Internet Explorer 3 est né la propriété JavaScript runtimeStyle. En fait, les ingénieurs d'Internet Explorer n'avait pas pensé que l'on puisse vouloir simplement éditer le style d'une balise. Dès lors ils avaient implémenté runtimeStyle comme prioritaire à style et seul accessible en écriture à JavaScript. Internet Explorer 4, sous la pression de NetScape, implémentera ensuite style et abandonnera petit à petit runtimeStyle, actuellement méconnu car il n'est pas implémenté dans FireFox, alors qu'il pourrait bien des fois nous éviter de devoir modifier le style proprement dit de la balise (par exemple lors d'effet onmousein/onmouseout).

Cela donne donc comme ordre de priorité runtimeStyle (JS); style (HTML / JS); styleSheets (CSS)

Routine de valeur de règle

Ensuite, si deux ou plusieurs règles sont définie dans le même contexte (généralement styleSheets), on décompose chaque règle CSS en différente partie, chaque partie représentant une balise HTML. Dans le cas de "HTML BODY.bodyClass *", il faut en distinguer trois "HTML", "BODY.bodyClass" et "*".

Chaque partie de la règle de style comprendra les éléments suivants (certains peuvent ne pas être renseigné) :

• Sélecteurs CSS (":hover"; ":focus"; ":active"; ":visited"; ":link"; " > "; ...)

La première priorité est donnée aux sélecteurs CSS. "A:hover" est prioritaire sur "A:visited", sur "A:link" et sur "A";

Les sélecteurs comme " > " sont appliqués sur la balise qui les suit (dans "HTML > BODY", c'est "BODY" qui reçoit le sélecteur " > "). Ce type de sélecteur est moins influant que l'ID, la classe et ":first-child" (voir suite) mais plus que le TagName.

Les sélecteurs ":fist-chid", ":first-letter" et ":first-line" sont considérés comme des éléments HTML à part. La règle "P:first-child" est donc composée de deux tags : "P" et ":first-child". L'élément ":first-child" ne possède ni ID, ni className est est donc inférieur en valeur aux règles qui les définissent. Il est par contre supérieure à toutes règles définissant uniquement un TagName (même accompagné de " > " ou similaire). Conséquence : "P A#ID" l'emportera toujours sur "P:first-child" mais "P:first-child" est toujours considérée avant "P A".

• ID ("#ID")

Si les sélecteurs de CSS ne permettent pas de déterminer la règle prioritaire, c'est l'ID qui s'y colle. Si il est renseigné sur seulement une des règles, elle sera prioritaire sur l'autre.

• ClassName (".className")

Ensuite la classe CSS permet encore de faire un tri via les règles. Il parait en effet évident que ".className" l'emporte sur "TagName".

• TagName ("TagName")

Trois types de valeurs existent pour TagName. La valeur par défaut (si rien n'est renseigné ou si explicitement noté) est "*". C'est la moins importante. Ensuite l'exemple le plus courant est un véritable TagName ("A", "P", "H3", ...). Ceux-ci peuvent être accompagné du selecteur " > " (ou similaire) qui augmente leur valeur. La priorité est néanmoins donnée à ":first-child" et sélecteurs semblables (voir Sélecteurs CSS)

• Sous-Selecteur parent

Si aucun des quatre éléments suivant n'ont permis de différencier deux règles, on passe à l'élément parent. ("A *.className" l'emporte sur ".className" (sous-entendu "* *.className") mais pas sur "#ID *.className".

La réponse à la question

Après avoir lu tout le baratin ci-dessus, vous devriez avoir déjà trouvé mais je vous livre tout de même la réponse à la question de mon Quizz, juste pour la forme.

1. La couleur.

La couleur etait blanche sous FF et Orange sous IE. La réponse au pourquoi se trouve dans la partie qui concerne l'emplacement de la règle de style (runtimeStyle n'est supporté que par IE). Le currentStye est supporté par IE, et récemment par FireFox 2, mais est en lecture-seule et indique quel est le stye courant appliqué sur l'élément (le résultat qui est rendu par le navigateur).

2. L'ordre de priorité & "!important"

Voir ci-dessus.