Couches de cascade CSS : quelle règle l’emporte, et à quelle étape

Ce que sont les couches de cascade

Une couche de cascade est un tiroir nommé où l’on range du CSS pour pouvoir ordonner des groupes entiers de règles les uns par rapport aux autres, sans toucher au moindre sélecteur. On déclare l’ordre une fois — @layer reset, components, utilities — et dès lors ce qui se trouve dans utilities l’emporte sur ce qui se trouve dans components, quelle que soit la comparaison des sélecteurs. C’est le mécanisme que CSS s’est donné pour le problème que la spécificité n’a jamais été conçue à résoudre : empêcher un framework, une bibliothèque de composants et vos propres surcharges de se disputer.

La règle qui surprend tout le monde concerne le CSS qui n’est dans aucune couche. La spécification dit que toute déclaration non affectée à une couche explicite est ajoutée à une couche finale implicite — et comme les couches ultérieures l’emportent sur les précédentes, les styles hors couche battent toutes les couches que vous avez déclarées. Non parce qu’ils sont plus spécifiques, ni parce qu’ils viennent plus loin dans le fichier. Parce qu’être hors couche les place en dernier dans l’ordre des couches.

La spécification le démontre elle-même. Elle montre une règle audio toute simple, de spécificité 0,0,1, écrite en premier, l’emporter sur une règle audio[controls] de 0,1,1 placée dans une couche reset — et affirme sans détour que les déclarations hors couche ont la précédence bien qu’elles aient une spécificité moindre et viennent avant dans l’ordre d’apparition. C’est l’exemple par défaut de cette page, et l’outil désigne l’étape des couches comme celle qui a tranché.

Comment s’en servir

1. Collez les règles en concurrence. Les déclarations de couche, les blocs de couche et les règles ordinaires sont tous lus. Limitez-vous aux déclarations réellement en lice : la cascade résout une propriété à la fois, et l’outil vous le signale s’il en trouve plusieurs.
2. Lisez l’étape qui a tranché, pas seulement la gagnante. Le verdict nomme laquelle des six étapes a départagé les deux premières. C’est la partie qui compte : s’il indique l’étape quatre, aucune classe ajoutée à un sélecteur ne changera l’issue.
3. Vérifiez l’ordre des couches. Il apparaît dans l’ordre qu’emploie le navigateur, avec la couche finale implicite des styles hors couche tout en bas, là où elle se trouve réellement. Les boutons d’exemple couvrent le cas de la spécification, un !important qui se retourne, un ordre de couches fixé d’avance, et une lutte qui va bel et bien jusqu’à la spécificité.

Pourquoi !important affaiblit une règle hors couche

Voici la partie qui ressemble à un bug sans en être un. La spécification indique que, pour comparer des déclarations de couches différentes, ce sont pour les normales celles de la dernière couche qui l’emportent — et pour les important celles de la première. L’importance inverse totalement l’ordre des couches.

Combinez maintenant cela avec la couche finale implicite. Une déclaration hors couche s’y trouve en dernier, ce qui la rend la plus forte parmi les normales. Marquez-la !important et l’ordre bascule : dernière devient la plus faible, si bien que la même règle passe de battre toutes les couches à perdre contre toutes. Ajouter !important à une surcharge hors couche — le réflexe quand quelque chose refuse de s’appliquer — est exactement le mauvais geste : c’est le deuxième bouton d’exemple de cette page.

La note de la spécification explique pourquoi c’est cohérent plutôt que pervers : cela suit la logique de l’ordre des origines, où les styles important de l’auteur sont plus faibles que ceux de l’utilisateur alors même que les styles normaux de l’auteur sont plus forts que ceux de l’utilisateur. Le drapeau !important existe pour que la partie située plus bas dans la pile puisse imposer ce que celle du dessus ne peut pas contredire. Les couches héritent de cette logique : le drapeau signifie donc cédez à la couche de base, et non gagnez à tout prix.

La conséquence pratique mérite d’être dite franchement. Si vous employez des couches et qu’une surcharge doit l’emporter, placez-la dans une couche ultérieure plutôt que de recourir à !important. Et si vous avez déjà des !important éparpillés dans du CSS hors couche, adopter les couches changera lesquelles de ces règles gagnent, dans un sens qui ne se devine pas à la lecture.

La spécificité est la cinquième étape sur six

La cascade trie les déclarations selon six critères successifs et s’arrête au premier qui les départage. D’abord l’origine et l’importance, puis le contexte, puis le fait que la déclaration soit attachée directement à l’élément, puis les couches, puis la spécificité, et enfin l’ordre d’apparition. La spécificité est cinquième. Tout ce qui la précède tranche avant même que le sélecteur soit examiné.

Cela renverse la façon dont le sujet est enseigné. La spécificité récolte les calculateurs, les moyens mnémotechniques en base dix et les discussions, alors qu’elle ne départage une lutte qu’une fois l’origine, l’importance, l’attachement et les couches tous à égalité. Ce site propose aussi un calculateur de spécificité, et il répond à une question réellement différente : il dit comment deux sélecteurs se comparent, tandis que cette page dit si cette comparaison a seulement lieu.

Les deux pages partagent un moteur précisément pour cela — les nombres de spécificité affichés ici sont calculés par le même module, de sorte que les deux ne peuvent pas donner des valeurs différentes pour un même sélecteur.

Un dernier membre de la liste mérite d’être connu. Les styles attachés directement — un attribut style — se trouvent à l’étape trois, au-dessus des couches et au-dessus de la spécificité. C’est pourquoi un style en ligne l’emporte sur un sélecteur d’identifiant sans être plus spécifique que quoi que ce soit : il gagne deux étapes plus tôt.

Ce que ceci ne fait pas

Il lit délibérément une petite tranche de CSS : déclarations de couche, blocs de couche et règles ordinaires. Ce n’est pas un analyseur CSS généraliste : une media query, une container query, une règle imbriquée ou un bloc supports sont ignorés avec un avertissement plutôt que résolus. Cela garde la page sur la cascade et non sur l’analyse, et cela signifie qu’il faut coller les règles en concurrence plutôt qu’une feuille de styles entière.

Deux des six étapes ne sont pas appliquées, et pour la même raison : il n’y a rien à quoi les appliquer. Le contexte exige des frontières de shadow tree, qu’une feuille collée n’a pas. Et deux des huit rangs d’origine sont les déclarations de transition et d’animation, qui exigent que quelque chose tourne réellement. Le tableau complet est affiché avec ces lignes marquées : l’omission est donc visible et non tue.

Il ne connaît pas non plus votre document. La cascade ne compare jamais que des déclarations qui s’appliquent au même élément et à la même propriété, et savoir si deux sélecteurs ciblent le même élément est une question qui porte sur votre HTML. L’outil suppose que tout ce que vous collez est en lice ; une règle qui ne cible jamais rien n’entre pas dans la lutte.

Enfin, ceci résout la cascade, pas tout le chemin de la feuille de styles au pixel affiché. L’héritage, les mots-clés revert et revert-layer et les transitions interviennent après le choix d’une gagnante, et aucun n’est modélisé ici.

Pourquoi est-ce gratuit ?

Lire du CSS et trier des déclarations relève du traitement de texte et s’exécute dans votre navigateur. Aucun serveur n’intervient : rien à facturer, aucun compte à créer.

Rien n’est envoyé et rien n’est conservé. Rechargez la page et elle aura oublié votre CSS.