Utiliser les variables en CSS3

Cet article est libre d'accès pour tous grâce à ceux qui soutiennent notre blog indépendant.

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/

Rejoins 250+ développeurs de notre liste de diffusion et sois reçois les articles directement dans ta boite mail.

S'inscrire à la newsletter

Aucun spam. Désabonnes-toi en un seul clic à tout moment.

Si vous avez des questions ou des remarques/conseils, n'hésitez pas à laisser un commentaire plus bas ! Je serais ravis de vous lire. Et si vous aimez l'article, n'oubliez pas de le partager avec vos amis.