La magie des variables CSS

Les préprocesseurs comme SASS ou LESS proposent depuis déjà un certain temps un système de variable pour le CSS. Cependant, ces outils présentent également un sérieux désavantage, la compilation. Effectivement, votre fichier SASS ou LESS doit être transformé en fichier CSS pour pouvoir être interprété par les navigateurs web. Contrairement au système de préprocessing, les variables CSS sont vraiment dynamiques et modifiables après le chargement de la page. Les préprocesseurs permettent certes de faire des styles dynamiques mais uniquement avant la compilation, le fichier CSS résultant reste statique au final. 

Qu’est-ce qu’une variable ?

Commençons par le début. Qu’est-ce qu’une variable et pourquoi l’utiliser dans une feuille de style ?

Une variable en informatique est un élément nommé qui va pouvoir stocker différentes valeurs. L’utilisation de variables est bien connues des joueurs, en effet, lorsque vous sélectionnez un avatar dans un jeu vidéo, le plus souvent, il vous est possible de personnaliser cet avatar. Changer son apparence physique, ses vêtements, ses outils/armes, etc. Tous ces éléments sont traités sous forme de variable par le logiciel du jeu. En création de code informatique, le principe est le même sauf que c’est vous qui définissez les variables que vous souhaiterez manipuler.

Le CSS a introduit il y a peu de temps ce concept de variable dans son langage. Les variables CSS sont également appelées “propriétés personnalisées”. Notez que les “variables” CSS ne sont pas exactement des variables au même sens que dans la plupart des langages de programmation car certaines propriétés inhérentes aux variables sont manquantes en CSS et c’est la raison pour laquelle on les appelle plutôt “propriétés personnalisées”.

Déclarer et utiliser une variable CSS

Une variable se déclare comme une propriété CSS classique mais avec — en préfixe. La syntaxe peut faire penser aux propriétés avec des vendor prefixes comme -webkit-* . Nous déclarerons donc une variable en CSS en utilisant simplement la notation --nom-de-la-variable : valeur. Il est à noté que, comme d’habitude en CSS, le nom d’une variable est sensible à la casse.

On déclarera généralement nos propriétés personnalisées à l’intérieur de sélecteurs très larges comme :root (qui est équivalent au sélecteur html mais qui possède un niveau de précision plus fort) afin de pouvoir les réutiliser partout.

Dans ce premier exemple, nous allons déclarer la couleur red dans une variable nommée --accent-color puis l’appliquer à un élément paragraphe p.

:root{
    --accent-color : red;
}

p{
  color : var(--accent-color);
}

Il nous est également possible de déclarer ou modifier une variable au sein d’un sélecteur positionné plus bas dans notre CSS. Ainsi, nous pourrons déclarer la couleur bleue directement dans un élément strong enfant de p. et l’utiliser de la même manière dans différents sélecteurs.

p strong{
  --accent-color : blue;
  color: var(--accent-color);
}

h2{
  color: var(--accent-color);
}

Il est bien entendu possible d’utiliser ces variables pour d’autres paramètres que la couleur et ainsi prédéfinir un grand nombre de propriétés CSS récurrentes. Dans l’exemple suivant nous allons définir les marges extérieurs margin au dessus et au dessous d’un élément section en s’appuyant sur le principe de variable.

:root{
  --vertical-margin : 4rem;
}

section{
  margin : var(--vertical-padding) auto;
}

Utilisation avancée

Il est intéressant de savoir qu’il est possible d’inclure les variable CSS à des règles de calcul calc(x $ y). Nous pourrons ainsi choisir d’avoir les marges de gauche et de droite d’un élément deux fois supérieurs à ses marges au du dessus et du dessous.

:root{
  --margin-value : 3%;
}
section{
  margin : var(--margin-value) calc(var(--margin-value * 2));
}

Les variables CSS permettent de choisir une valeur par défaut au cas où notre variable n’est pas définie. Dans cette exemple, la variable --couleur-secondaire n’existe pas. Pour la couleur de fond du
.my_block, le navigateur va donc utiliser --couleur-principale à la place de --couleur-secondaire.

:root{
  --couleur-principale : #222222;
}
.my_block{
  color : var(--couleur-secondaire, var(--couleur-principale));
}

Pour conclure

Les CSS variables (ou CSS Custom Properties) propulsent le langages CSS dans une toute autre dimension. Elles permettent d’obtenir des styles réellement dynamiques tout en réduisant le code produit : les avantages sont énormes !

Il existe cependant quelques restriction à l’utilisation de ces propriétés. Nous ne pourrons pas définir une variable numérique et de lui attacher une unité lorsque nous l’utilisons. Le chemin vers un fichier ne peut pas être morcelé pour être utilisé dans une variable. La cible d’une media query ne peut pas être passé en variable. Il n’est pas possible de définir une variable sans valeur. Cependant un [espace] est une valeur. La différence est subtile mais potentiellement source de problèmes.

Une fois ces quelques restrictions comprises, il ne vous reste plus qu’à faire preuve de créativité dans l’utilisation de ces variables. Il peut intéressant de les déclarer dans une feuille CSS indépendante et pourquoi pas générée en PHP en s’appuyant sur des valeurs définies par un administrateur dans le backoffice d’un site. Les applications sont nombreuses, elles allègerons vos feuilles de styles et vous permettrons de gagner du temps sans avoir systématiquement recours au processing.