Les variables CSS

Les variables en CSS (custom properties en anglais, littéralement « propriétés personnalisées ») permettent de définir des valeurs – des tailles, des couleurs – réutilisables à plusieurs endroits de votre feuille de style. La maintenabilité de votre feuille de style et la création de thèmes en sont grandement facilitées.

Les variables sont natives au langage CSS. Elles sont donc décodées, ou interprétées, par le navigateur. En ce sens, elles sont différentes des variables des préprocesseurs (voir notre tutoriel sur Sass) qui requièrent une feuille de style compilée. Bien que la plupart des navigateurs récents supportent les variables, il peut être préférable de se tourner vers d’autres alternatives si la rétrocompatibilité est un requis important de votre projet.

Utiliser une variable

Pour utiliser une variable, il faut d’abord la déclarer à l’aide d’une propriété personnalisée, sous le format --<nom-de-la-variable>.

element {
    --couleur-theme: red;
}

Pour obtenir la valeur d’une variable, il faut utiliser la fonction var().

element {
    color: var(--couleur-theme); 
}

Contenu d’une variable

Une variable peut contenir toute valeur attribuable à une propriété CSS, incluant des couleurs, des chaînes de caractère, des nombres, de mesures et d’autres variables.

.exemple {
    --couleur-accent: red;
    --taille-texte: 16px;
    --fond: url('/images/fond.png') no-repeat center center;
    --fleche: "\2192";
    --nombre-colonne: 2;
    --bordure: 1px solid var(--couleur-accent);
}

Portée d’une variable

Les variables CSS cascadent, c’est à dire que les éléments enfants hériteront des variables du parent. L’exemple suivant illustre ce concept.

See the Pen Exemple: héritage des variables CSS by Jean-Luc Montreuil (@cssactif) on CodePen.

La variable --accent est définie à deux reprises: pour les titres h1 et pour les paragraphes p. Dans les deux cas, la variable est utilisée pour la propriété color. La partie intéressante est le bloc small: la variable --accent donne la couleur du fond (background-color). Ainsi, si l’élément small se situe dans un élément titre il prendra la couleur bleu, s’il se situe dans un paragraphe il prendra la couleur rouge et ce en une seule déclaration!

Ce comportement ne se limite pas au parent direct. Il s’applique également aux ancêtres. Si l’élément small avait été englobé d’autres éléments, le résultat aurait été le même.

<h1>Exemple avec les variables   <-----------------┐    OUI
    <em>                              <------------┤    NON
        <span>                             <-------┤    NON
            <small>par Orange</small> -------------┙
        </span>
    </em>
</h1>

CSS parcourt l’arborescence (le DOM) jusqu’à ce qu’une déclaration soit atteinte ou qu’il n’y ait plus d’ancêtres à explorer.

Le cas des pseudo-sélecteurs

Une application du comportent des variables concerne les pseudo-sélecteurs. Observez le style du bouton dans l’exemple précédent.

button {
  --etendue: 2px;
  
  box-shadow: 0px 0px 0px var(--etendue) rgba(0,0,0,0.5);
}

button:hover {
  --etendue: 10px;
}

En redéclarant la variable --etendue dans :hover, il est possible d’affecter le style du bouton au survol pour modifier un seul paramètre de box-shadow sans avoir à répéter la déclaration.

Déclarer une variable globale

Le concept de variable globale n’existe pas réellement en CSS. Les variables doivent être déclarées dans un bloc. Si vous êtes familier avec préprocesseurs Sass ou Less, cette limitation peut sembler contre-intuitive. Gardez à l’esprit que les variables sont des propriétés, elles respectent généralement les mêmes règles syntaxiques.

Déclarer une variable à l’extérieur d’un bloc n’est pas valide.

--couleur-theme: red;
.exemple {
   color: var(--couleur-theme);
}

Néanmoins, puisque les variables cascadent, il est possible de les déclarer au niveau le plus élevé (la racine) du document HTML, soit l’élément html lui-même. Alors, la variable pourra être utilisée partout dans la feuille de style. Toutefois, il est fréquent d’utiliser le pseudo-sélecteur :root pour déclarer ces variables.

html {
    --ma-variable-globale: blue;
}
:root {
     --ma-variable-globale: red;
}

Les deux versions sont quasiment équivalentes, mais :root jouit d’une spécificité plus élevée. Donc, la valeur d’une variable définie dans un bloc :root aura préséance sur la même variable définie dans un bloc html.

Gestion des erreurs

De façon générale, une attention particulière devrait être portée à la validité de votre feuille de style. Néanmoins, CSS incorpore des mécanismes de récupération, qui impliquent un retour à la valeur initiale ou héritée, au cas où une variable serait d’un type erroné pour une propriété (par exemple, assigner une unité en pixels à color) ou si une variable n’est pas déclarée. Dans le second cas, la fonction var() permet de définir une valeur par-défaut.

.exemple {
     color: var(--variable-inexistante, red); 
}

Il est possible de donner une autre variable comme valeur par-défaut et de les enchaîner.

.exemple {
     color: var(--variable-inexistante, var(--variable-valide));
     background-color: var(--variable-inexistante, var(--variable-potentielle, red));
}

Constatez qu’il faut toujours utiliser la fonction var(), même lorsque une variable est donnée en tant que valeur par-défaut. var(--variable-inexistante, --variable-valide) n’est pas valide.

Compatibilité

  • Chrome
    • 49+
  • Firefox
    • 31+
  • Edge
    • 16+
  • Internet Explorer
    • Non
  • Safari
    • 10+
  • Chrome sur Android
    • 92+
  • Safari sur iOS
    • 10+

Données de compatibilité par Can I Use?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *