Temps de lecture: 2 minutes
(J’ai toujours voulu faire un titre de clickbait comme celui-ci et quand cette chance s’est présentée, je ne pouvais pas la laisser passer. 😅 Désolé !)
Tout en mettant mes idées dans des diapositives pour mon atelier Dynamic CSS pour la semaine prochaine, je travaillais sur une diapositive expliquant comment les mots-clés larges CSS fonctionnent avec des propriétés personnalisées. inherit, initial, unset Je l’avais utilisé de nombreuses fois et le connaissais bien. Mais qu’en est-il revert? Comment cela a-t-il fonctionné ? J’ai eu une idée, mais j’ai rapidement codé une démo pour l’essayer.
Le code était :
:root {
--accent-color: skyblue;
}
div {
--accent-color: revert;
background: var(--accent-color, orange);
}Ouf, j’avais raison, mais le degré d’incertitude que j’avais avant de voir le résultat m’a fait penser que je pourrais être sur quelque chose.
Avant de poursuivre votre lecture, prenez un moment pour réfléchir à ce que vous voteriez. Attention : Spoilers à venir !
🤔
🤔
🤔
🤔
J’ai donc posté un quiz sur Twitter :
Voici les résultats après les 24 heures de fonctionnement :
orange était le grand gagnant, et la vraie bonne réponse, skyblue n’a obtenu que 18,1 %, presque autant que transparent!
Si vous vous trompez, vous êtes dans très bonne compagnie : non seulement 82 % des répondants au sondage se sont également trompés, mais même l’éditeur de la spécification CSS Variables et co-éditeur de CSS Cascading and Inheritance (qui définit revert), Tab Atkins, m’a confié en privé qu’il s’était lui aussi trompé : il avait voté pour orange! (Oui, j’ai obtenu sa permission pour le mentionner)
Alors que se passe-t-il réellement ? Pourquoi obtenons-nous skyblue? Je vais essayer d’expliquer du mieux que je peux.
Commençons par quoi revert fait: Il rétablit la valeur en cascade de la propriété de sa valeur actuelle à la valeur de la propriété aurait eu si aucune modification n’a été apportée par l’origine du style courant à l’élément courant.
Cela signifie qu’il annule tous les styles d’auteur et réinitialise la valeur que la propriété aurait à partir de la feuille de style utilisateur et de la feuille de style UA. En supposant qu’il n’y a pas --accent-color déclaration dans la feuille de style utilisateur, et bien sûr les feuilles de style UA ne définissent pas de propriétés personnalisées, cela signifie que la propriété n’a pas de valeur.
Étant donné que les propriétés personnalisées sont des propriétés héritées (à moins qu’elles ne soient enregistrées avec inherits: falsemais celui-ci ne l’est pas), cela signifie que la valeur héritée s’infiltre, ce qui est – vous l’avez deviné – skyblue. Vous pouvez voir par vous-même dans ce codepen.
Et si notre propriété était enregistrée comme non héréditaire ? Serait-ce alors orange? Bien essayé, mais non. Lorsque nous enregistrons une propriété personnalisée, il est obligatoire de fournir une valeur initiale. Cela signifie que la propriété se résout toujours en une valeur, même --accent-color: initial ne déclenche plus le repli. Vous pouvez le voir par vous-même dans ce codepen (Chrome uniquement à partir de mai 2021).
Aimait ça? Alors vous allez adorer l’atelier ! Il reste encore quelques billets !