WhatZeWeb

Vous est-il déjà arrivé de devoir modifier une même couleur dans les fichiers CSS d'un gros site Web ? A parcourir ligne après ligne votre code pour retrouver toutes les occurences de celle-ci ?

Certes, un Ctrl+f peut nous éviter de trop nous casser la tête, mais tout de même, ce n'est pas l'idéal ! Et si je vous disais qu'il y a beaucoup mieux ? 

Dans cet article, je vais vous présenter les variables CSS, ou propriétés personnalisées, et vous allez voir comment elles vont vous permettre de factoriser votre code et vous simplifier vos développements en CSS.

Tout d'abord, commençons par voir ce que sont les variables CSS.

Si vous avez l'habitude de développer avec des langages tels que JavaScript, PHP, Java, etc., la notion de variable vous est déjà familière : c'est un nom symbolique associé à une valeur donnée, qui peut varier avec le temps.

En CSS, cette notion est moins habituelle, et pourtant, elle s'avère utile, notamment pour éviter de la duplication de code et assurer une bonne maintenabilité de celui-ci.

Comment les utiliser ?

Comme toute autre variable, avant de pouvoir l'utiliser, il faut la déclarer. Plus exactement, on déclare la propriété personnalisée :

body {
    --main-color: blue;
}

Comme vous pouvez le voir, notre propriété personnalisée (ou CSS Custom Property en anglais) ressemble à et se déclare comme une propriété classique, mais elle est préfixée de --. Vous pouvez également constater qu'elle est (et doit) être déclarée pour un scope donné (un sélecteur CSS).

Pour l'utiliser, rien de plus simple, la fonction var() nous permet de faire référence à notre variable :

body {
    --main-color: blue;
    background-color: var(--main-color);
}

 

Valeur par défaut

Lors de l'appel de la fonction var(), il est possible de passer un second paramètre, pour faire un fallback au cas où la variable ne serait pas définie, par exemple : 

body {
    --text-Color: blue;
    color: var(--text-color, red);
}

Ici par exemple, on fait appel à --text-color, qui n'existe pas (eh oui ! Attention à la casse 😉 ). Notre texte s'affichera donc en rouge.

Il est également possible de préciser plusieurs valeurs par défaut, par exemple :

body {
    color: var(--main-color, var(--second-color, red));
}

Dans cet exemple, si --main-color est définie, alors elle sera appliquée. Si elle ne l'est pas, alors le texte prendra la couleur définie par --second-color, et si aucune de ces deux variables n'est définie, le texte s'affichera en rouge.

 

L'héritage

Le fonctionnement en cascade - ou héritage - est au coeur du fonctionnement du CSS. C'est ce qui permet de faire en sorte qu'un style, par exemple, la taille de la police, appliqué à un élément se propage aux enfants.

Cela s'applique également aux variables, ainsi, par exemple :

<section>
    <h2>Un titre !</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Nulla nec vulputate dui. 
       Cras vulputate justo et magna convallis, sagittis euismod mauris sagittis. 
       Aliquam erat volutpat. Phasellus eleifend nisi tortor, in mollis ipsum consectetur eu. 
       In ac nulla non odio condimentum varius. 
    </p>
</section>

section {
    --ma-variable: 1.5em;
}

Dans le cas ci-dessus, var(--ma-variable) renverra 1.5em pour l'élément <section>, mais également pour ses enfants, <h2> et <p>.

Cela nous amène à une utilisation intéressante, notamment dans le cas de projets plus importants, pour éviter les répétitions et centraliser la déclaration de nos différentes propriétés personnalisées :

:root {
    --main-color: blue;
    --main-font: Arial;
}

En déclarant ainsi nos propriétés dans la pseudo-classe :root, nous serons en mesure de les réutiliser partout ailleurs dans notre code CSS.

La surcharge

Comme pour les propriétés "classiques", les variables CSS peuvent être surchargées. On peut par exemple déclarer une valeur pour un élément générique, et l'adapter à l'aide de sélecteurs plus spéciafiques, comme ici :

p {
    --font-color: blue;
    color: var(--font-color);
}

.red {
    --font-color: red;
}

/* Cela équivaut à */
p {
   color: blue;
}

p.red {
    color: red;
}

Cette possibilité offre un avantage majeur : éviter de créer des règles supplémentaires. Prenons un autre exemple :

<h3>Un titre</h3>

<div id="main-content">
    <h3>Un autre titre</h3>
</div>

h3 {
    color: blue;
}

#main-content {
    color: green;
}

Ici, notre titre placé dans la <div> prendra la couleur bleue, définie pour les h3. Si nous souhaitons qu'il prenne la couleur définie pour son élément parent (vert), il faut ajouter une nouvelle règle, plus spécifique :

#main-content h3 {
    color: inherit;
}

Avec les variables CSS, nous pouvons éviter d'avoir à créer cette règle supplémentaire :

h3 {
    color: var(--title-color, blue);
}

#main-content {
    --text-color: green;
    --title-color: var(--text-color);
    color: var(--text-color);
}

Ce code CSS est équivalent au code précédent, sans avoir eu à créer de nouvelle règle : par défaut, les titres sont en bleu, sauf les titres h3 contenus dans la <div>, qui seront affichés en vert.

 

Validité des valeurs

Lorsque le navigateur lit une propriété personnalisée, il ne sait pas à quelle moment elle va être utilisée. Par conséquent, ces valeurs sont toujours considérées comme étant valides. Ce n'est qu'au moment de l'exécution, avec l'appel de var(), que la valeur renseignée va potentiellement générer une incohérence. Par exemple :

:root {
    --text-color: 2em;
}

div {
    color: var(--text-color);
}

Ici, la valeur 2em ne peut pas être considérée comme invalide lors de la déclaration de --text-color : le navigateur ne sait pas encore dans quel contexte elle va être utilisée. En revanche, lorsque la substitution va se faire à la place de var(--text-color), on va se retrouver avec une incohérence : la propriété color ne peut pas prendre la valeur 2em !

C'est le concept de validité à l'exécution. Le navigateur va alors vérifier si la propriété peut être héritée d'un parent, ou utiliser la valeur par défaut (ici, black).

Compatibilité

Les propriétés personnalisées sont plutôt très bien supportées par les navigateurs : les versions récentes de Chrome, Edge, Safari, Opéra et Firefox (entre autres), les prennent totalement en charge (soit un peu plus de 91% des utilisateurs). Vous pouvez retrouver toutes les informations concernant la compatibilité sur le site Caniuse.

 

Et voilà, nous arrivons à la fin de cet article, vous en savez désormais un peu plus sur les variables CSS, et leur utilisation 😉