-KpxDJFvsXADexa2U2Cj

1. Compatibilité

Avant toute chose, il est important de savoir que les variables CSS ne fonctionnent pas sur tous les navigateurs, desktop ou mobiles. En date d'aujourd'hui, il est sécuritaire d'affirmer qu'elles sont supportées par presque tous les navigateurs populaires, à quelques exceptions que voici :

Pour les utilisateurs de Firefox, de Chrome, de Safari et d'Opera, il ne devrait y avoir aucun problème. Par contre, Edge rencontre encore quelques difficultés alors qu'Opera Mini et Internet Explorer ne supporte absolument pas ces variables (pour IE il faudra complètement oublier cette possibilité, sa dernière version étant parue il y a plus de 4 ans déjà).

Je vous conseille donc d'utiliser ces variables CSS avec précautions, quitte à vous astreindre complètement si une majeure partie de vos membres utilisent encore Internet Explorer. Il serait certainement possible d'utiliser des BrowserHack, mais le principe même de ces variables (c'est-à-dire de facilité les modifications et d'éviter les répétitions) perdrait tout son sens.

2. Qu'est-ce qu'une variable ?

Tout d'abord, une variable est un symbole qui permet d'associer une valeur à un identifiant, constante ou inconnue. Une fois définie, cette variable peut alors être utilisée autre part, même dans une autre variable. Pour ceux qui ne sont pas familiers avec la programmation, voici un exemple très simple en JavaScript :

Code:

var a = 1;
var b = 2;
var c = a + b;

Dans cet exemple, les valeurs des variables a et b sont constantes, alors que la variable c est considérée comme inconnue (oui, même si le calcul est simple), tout simplement parce que sa valeur (dans ce cas-ci l'addition de deux variables) dépend d'autres variables.

3. Qu'est-ce qu'une variable CSS ?

Lorsqu'il est question de CSS, le concept de la variable est différent. En soit, il est possible d'en imiter le principe primaire (c'est-à-dire stocker une valeur dans un identifiant), mais la syntaxe et l'utilisation sont un peu moins flexibles que pour d'autres langages de programmations. Contrairement au JavaScript ou au PHP, les variables CSS (plutôt appelées propriétés personnalisées ou custom properties en anglais), ne peuvent contenir que la valeur d'une propriété CSS.

Pour les utiliser, il faut d'abord les définir (oui oui), puis les appeler, comme ceci :

4. La porté des variables CSS

Avant de commencer à vous expliquer comment bien utiliser ces variables, il est important de comprendre comment elles fonctionnent et où il est possible de les placer. Si on regarde mon exemple au-dessus, vous avez certainement remarqué que mes variables étaient déclarées à deux endroits différents et ce n'était pas par hasard ni par erreur : les variables CSS sont strictement encapsulées à l'intérieur d'un sélecteur CSS, qu'il soit élément, classe ou ID.

Qu'est-ce que ça veut dire ? Eh bien qu'une variable est exclusive à l'élément dans laquelle elle est déclarée, ainsi qu'à tous les enfants de cet élément. Si on reprend mon exemple ci-dessus, j'ai utilisé :root {} pour déclarer les deux premières variables, dites "globales" (parce que ce sélecteur cible l'élément racine de la page, c'est-à-dire l'élément html pour une page HTML). Par contre, la troisième variable est déclarée à l'intérieur d'une classe et ne sera accessible qu'aux éléments, classes ou ID de celle-ci.

Code:

html {
    --variable: 10px;
    --variable-deux: green;
}