Variables CSS (custom properties)

Déclarer et utiliser des variables

:root {
  --color-main: #0088d1;
  --spacing: 16px;
  --radius: 8px;
}
.button {
  padding: calc(var(--spacing) / 2) var(--spacing);
  border-radius: var(--radius);
  background: var(--color-main);
  color: #fff;
}
.link {
  color: var(--color-main);
}

• Le nom d’une variable commence par deux tirets et la valeur s’insère dans une propriété avec var().
• :root est l’élément racine de la page (html), les variables qui y sont définies s’appliquent donc à toute la page.
• Les valeurs peuvent servir dans des calculs avec calc() – le bouton a 8 px de marge intérieure en haut et en bas et 16 px à gauche et à droite.
• Les noms sont sensibles à la casse : --Spacing et --spacing sont deux variables différentes.

Le second paramètre de var() est une valeur de secours pour le cas où la variable n’est pas définie : color: var(--link-color, #0088d1);. C’est utile dans des composants qui doivent fonctionner aussi sans variables définies.

Redéfinir pour une partie de la page

<a class="button" href="/cart/">Ajouter au panier</a>
<div class="notice">
  Cet article n’est plus en stock.
  <a class="button" href="/cart/">Modifier le panier</a>
</div>

.notice {
  --color-main: #c62828;
  border: 1px solid var(--color-main);
}

Les variables sont héritées comme la couleur du texte. À l’intérieur du bloc .notice, c’est le rouge qui s’applique, le bouton et la bordure sont donc rouges, tandis qu’à l’extérieur le bleu reste. Des règles séparées pour .notice .button et les autres éléments à l’intérieur ne sont pas nécessaires.

Variables dans une media query

@media (max-width: 600px) {
  :root {
    --spacing: 10px;
  }
}

Sur un écran étroit, une seule valeur change et toutes les marges intérieures qui l’utilisent diminuent. Dans l’autre sens, cela ne marche pas : dans la condition d’une media query elle-même, une variable ne fonctionne pas – le navigateur n’utilisera pas @media (max-width: var(--width)).

Mode sombre

:root {
  --background: #ffffff;
  --text: #262626;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #1e1f22;
    --text: #e6e6e6;
  }
}
body {
  background: var(--background);
  color: var(--text);
}

Si l’utilisateur a activé l’apparence sombre dans son système d’exploitation, le second jeu de couleurs s’applique. Les styles de la page ne changent pas, seules les valeurs des variables changent. color-scheme: light dark indique au navigateur que la page prend en charge les deux modes – en mode sombre, il assombrit alors aussi l’apparence par défaut des champs de formulaire.

Modifier les variables en JavaScript

const root = document.documentElement;
root.style.setProperty("--color-main", "#2e7d32");
console.log(getComputedStyle(root).getPropertyValue("--color-main").trim());   // #2e7d32

La modification s’applique immédiatement partout où la variable est utilisée – sans parcourir les éléments ni réécrire leurs styles. Le navigateur renvoie la valeur de la variable sous forme de texte ; trim() supprime les éventuels espaces autour.

À quoi faire attention

• Une valeur invalide ne se révèle qu’à l’insertion. Avec une propriété ordinaire, le navigateur ignore la ligne invalide et la précédente s’applique. Mais si var() insère une valeur qui n’a pas de sens pour la propriété (par exemple --spacing: blue dans padding), la ligne précédente n’est pas utilisée – la propriété prend sa valeur initiale et, pour les propriétés héritées comme la couleur du texte, la valeur du parent.
• On ne peut pas ajouter d’unité à une variable. Avec --width: 20, width: var(--width)px ne fonctionne pas – le nombre et l’unité restent deux parties séparées. La bonne écriture est width: calc(var(--width) * 1px).
• Les variables CSS ne sont pas des variables Sass. Les variables des préprocesseurs (Sass, Less) sont remplacées par leurs valeurs lors de la compilation et n’existent plus dans le navigateur. Les variables CSS vivent dans le navigateur – elles sont héritées et changent dans les media queries et en JavaScript.

Articles connexes :
Tailles fluides avec clamp(), min() et max()
Container queries : apparence selon la largeur du conteneur
CSS Grid : mise en page