Written by Nathanaël Cherrier

Utiliser les variables en CSS3

Published in

Share this

twitter facebook

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/


If your have any questions or advices, create a comment below! Also if you like this post, don't forget to share it to your friends. You can also support the blog on Patreon.