Utiliser les variables en CSS3

Cet article est libre d'accès pour tous grâce aux membre du Mindsers Club qui soutiennent notre blog indépendant. Si vous appréciez le contenu que je propose, je vous invite à rejoindre le club dès aujourd'hui.

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 200+ développeurs et sois informé chaque mois des nouveaux contenus disponible sur le blog.

Aucun spam. Désabonnez-vous 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.