La plupart des valeurs CSS sont propres à une propriété : flex n'a de sens que pour display, bold que pour font-weight. Quatre mots-clés échappent à cette règle et fonctionnent sur n'importe quelle propriété, de color à grid-template-columns. Ils ne décrivent pas une valeur, mais une façon de choisir la valeur.
Les confondre est facile puisque trois d'entre eux se ressemblent sur le papier. Le seul moyen de vraiment les distinguer est de regarder ce qu'ils donnent sur un cas où la réponse diffère selon le mot-clé choisi.
Définition
Les valeurs CSS globales, aussi appelées mots-clés universels, sont inherit, initial, unset et revert. Chacune indique au navigateur où aller chercher une valeur plutôt que d'en écrire une explicitement.
| Mot-clé | Valeur retenue |
|---|---|
inherit | Celle, déjà calculée, du parent |
initial | La valeur par défaut définie dans la spécification CSS |
revert | La valeur par défaut du navigateur pour cet élément (sa feuille de style interne) |
unset | inherit si la propriété Héritage CSS, sinon initial |
Un exemple où les quatre résultats diffèrent
display est une bonne propriété pour voir la différence, parce qu'elle n'hérite jamais et que le navigateur lui donne, pour certaines balises comme li, une valeur par défaut différente de la valeur par défaut de la spécification.
ul {
display: flex; /* règle personnalisée sur le parent */
}
li {
display: inherit;
}
/* -> flex, copie le parent */
li {
display: initial;
}
/* -> inline, le défaut générique CSS */
li {
display: unset;
}
/* -> inline aussi, display n'hérite pas */
li {
display: revert;
}
/* -> list-item, le défaut du navigateur pour li */Les quatre lignes ne peuvent évidemment pas coexister sur le même sélecteur : c'est la comparaison, une valeur à la fois, qui montre que chaque mot-clé va chercher sa réponse à un endroit différent.
unset, le choix par défaut le plus sûr
Pour une propriété qui hérite, comme color, unset se comporte comme inherit. Pour une propriété qui n'hérite pas, comme margin ou border, il se comporte comme initial. C'est ce comportement adaptatif qui en fait le mot-clé le plus pratique pour annuler une règle sans savoir par cœur si la propriété visée hérite ou non.
revert est le seul des quatre à regarder la feuille de style du navigateur plutôt que la spécification CSS. Il sert précisément à annuler un CSS reset et normalize sur un élément précis, en lui rendant son apparence native, un bouton qui redevient un vrai bouton par exemple.Cas d'usage typique
Un composant qui utilise all: unset; repart d'une feuille quasiment vierge sur toutes ses propriétés d'un coup, pratique pour neutraliser le style imposé par le navigateur sur un button avant de le restyler entièrement à la main. Utiliser all: revert; à la place ferait l'inverse : cela rétablirait le style natif du bouton plutôt que de le vider.
Questions fréquentes
unset et initial ?initial va toujours chercher le défaut générique de la spécification CSS, sans jamais regarder si la propriété hérite. unset regarde d'abord si la propriété hérite : si oui, il se comporte comme inherit, sinon comme initial. Les deux ne diffèrent donc que sur les propriétés héritées.
revert et unset semblent proches, pourquoi choisir l'un plutôt que l'autre ?unset vise les défauts définis par la spécification CSS elle-même. revert vise les défauts du navigateur, ceux que ce dernier applique nativement à chaque balise. Sur un bouton, revert redonne son apparence native, alors que unset le vide de tout style hérité ou par défaut.
font ou margin ?Oui, et c'est même là qu'ils sont les plus utiles : appliqués à un raccourci, ils réinitialisent d'un coup toutes les propriétés détaillées qu'il regroupe, sans avoir à les lister une par une, ce qui évite d'oublier l'une d'entre elles en cours de route.