La même couleur de marque écrite quarante fois dans une feuille de style pose un problème simple : la changer un jour signifie la retrouver quarante fois, au risque d'en oublier une. Un préprocesseur comme Sass réglait ce problème avant même que le navigateur ne reçoive le CSS, mais uniquement au moment de la compilation. Les variables CSS natives résolvent le même problème directement dans le navigateur, à tout moment.
Elles se distinguent des variables de préprocesseur sur deux points qui changent tout : leur portée suit les règles normales du CSS, et leur valeur peut changer après coup, y compris depuis du JavaScript.
Définition
Une variable CSS, techniquement appelée propriété personnalisée, se déclare avec deux tirets suivis d'un nom, et se lit avec la fonction var(). Une valeur de repli facultative, après une virgule, s'applique si la variable n'est pas définie.
:root {
--couleur-marque: #e8511d;
--espacement: 16px;
}
.bouton {
background-color: var(--couleur-marque);
padding: var(--espacement, 12px); /* 12px si la variable manque */
}Le nom est sensible à la casse et peut contenir des tirets ; --couleur-marque et --Couleur-Marque désignent deux variables différentes.
Une portée qui suit l'héritage, pas un simple copier-coller
Une variable Sass est remplacée par sa valeur au moment de la compilation : une fois le fichier CSS généré, elle a disparu, aucune trace n'en subsiste dans le navigateur. Une variable CSS, elle, reste une vraie propriété CSS vivante, qui suit les mêmes règles d'Héritage CSS que color : déclarée sur un ancêtre, elle est visible par tous ses descendants, sauf si l'un d'eux la redéfinit.
.carte-sombre {
--texte: white;
}
.carte-sombre p {
color: var(--texte); /* hérite de la valeur du parent */
}Cette portée par héritage permet de redéfinir une variable pour un seul composant ou une seule section, sans toucher à sa valeur globale déclarée sur :root.
Modifiable en JavaScript, sans recompilation
Là où changer une variable Sass exige de relancer la compilation, une variable CSS se modifie à tout moment depuis JavaScript, avec element.style.setProperty('--nom', 'valeur'), et le changement s'applique instantanément, sans recharger la page ni régénérer un fichier.
/* côté JavaScript */
document.documentElement.style.setProperty("--couleur-marque", "#1a73e8");Cas d'usage : thème clair et sombre
Le thème clair et sombre est l'usage le plus courant : une poignée de variables couvre les couleurs de fond et de texte, redéfinies une seule fois selon le thème actif, plutôt que de dupliquer chaque règle de couleur du site. Notre formation HTML et CSS reprend cet exemple de thème clair et sombre pour montrer comment organiser les variables d'un projet dès la première ligne de CSS.
:root {
--fond: white;
--texte: #111;
}
@media (prefers-color-scheme: dark) {
:root {
--fond: #111;
--texte: white;
}
}
body {
background: var(--fond);
color: var(--texte);
}var() ne se déclenche que si la variable n'est pas définie du tout. Une variable définie mais avec une valeur invalide pour la propriété qui l'utilise (un mot au lieu d'une couleur, par exemple) ne bascule pas sur le repli : la propriété entière devient invalide, ce qui n'est pas la même erreur et se débogue autrement.Questions fréquentes
Non, une variable CSS ne peut pas servir de condition à l'intérieur de @media : les media queries sont évaluées avant que les variables ne soient résolues. Elle reste en revanche parfaitement utilisable dans les déclarations à l'intérieur du bloc.
La variable Sass disparaît à la compilation et n'a aucune existence dans le navigateur : elle ne suit ni la cascade ni l'héritage. La variable CSS existe au moment de l'exécution, hérite comme une propriété normale, et peut être lue ou modifiée après coup, y compris en JavaScript.
La propriété qui l'utilise retombe sur sa valeur héritée si elle Héritage CSS, sinon sur sa valeur initiale. Rien ne casse la page, mais le résultat visuel peut surprendre si on attendait une couleur précise.