Utiliser les variables en CSS3

Cet article est libre d'accès pour tous grâce à la générosité des abonnés de Mindsers Blog qui soutiennent notre blog indépendant. Si vous appréciez le contenu que je propose, je vous invite à vous abonner 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/

Join 100+ developers and entrepreneurs and get notified on every new content.

No spam ever. Unsubscribe in a single click at any time.

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.



The comment section is only available for paying subscribers.