Utiliser les variables en CSS3

Je vous présente aujourd’hui une fonctionnalité très très attendue par nombre de développeurs, intégrateurs, designeurs, etc.. Très attendue par tous ceux qui utilisent le CSS.

Grâce à CSS3 nous allons pouvoir bannir les casses tête sans fin pour retrouver le code couleur du bouton droit du menu lorsqu’il est sélectionné pour le réutiliser ailleurs dans notre feuille de style. Nous allons utiliser les variables !

Comment ça marche ?

/* Déclaration */ 
--gris-primaire: rgba(252, 252, 252, 0.9); 

/* Utilisation */ 
color: var(--gris-primaire);

Les scopes

Attention cependant à l’endroit où vous déclarez vos variables. En effet, comme dans les autres langages de programmation, l’existence d’une variable dépend du scope dans lequel elle est déclarée.

a {
     --marge: 10px; 
} 

p {
     padding: var(--marge);
     margin : var(--marge); 
}

Dans l’exemple ci-dessus les marges interieur et exterieur de l’élément p ne seront pas mise à 10px puisque la variable --marge n’existe que dans l’élement a et doit être utilisé dans a.

Alors on doit utiliser une variable globale !?

Et oui ! Et voilà comment faire :

:root{
     --var: 2em; 
} 

a{
     border: var(--var) solid black; 
}

Compatibilité ?

A ce jour tout les navigateurs récents (Safari, Chrome et Firefox) sauf Internet Explorer Microsoft Edge implémentent cette fonctionnalité de CSS3.

source : https://www.w3.org/TR/css-variables/