Pourquoi et comment utiliser des variables en CSS ?

Pourquoi utiliser des variables CSS ?

Tout d’abord, l’utilisation de variables CSS permet d’avoir une meilleure lisibilité. Qui sait ce que veut dire « #3f6aea » ? Pas grand monde ! Par contre, si j’enregistre cette valeur hexadécimale dans une variable appelée « bleu-roi », il est bien plus simple de comprendre à quoi ça correspond. ?

Le deuxième point, sans doute le plus important, concerne la maintenance. En effet, le jour où vous voudriez utiliser un bleu roi un peu différent, vous allez devoir remplacer chaque ligne indiquant « #3f6aea » par le nouvel hexadécimale choisi. Par contre, si vous l’avez stocké dans une variable, il vous suffit de modifier la valeur de la variable pour effectuer les changements partout.

Les préprocesseurs comme SASS ou LESS proposent depuis déjà un certain temps un système de variable pour le CSS. De plus, ils offrent d’autres avantages non négligeables, comme le fait d’offrir une imbrication plus efficace, des Mixins ou encore des petites boucles. Cependant, ces outils présentent également un sérieux désavantage, la compilation. Effectivement, votre fichier SASS ou LESS doit être transformé en fichier CSS pour pouvoir être interprété par les navigateurs web. Cette phase de compilation, compliquant les choses, n’est bien entendu pas nécessaire en pur CSS.

La compatibilité avec les navigateurs web

Comme d’habitude, les navigateurs prennent leur temps en termes de compatibilité de nouvelles fonctionnalités. Firefox, Google Chrome, Safari et Opera jouent bien le jeu puisqu’ils acceptent les variables CSS depuis déjà un petit moment. C’est du côté de Microsoft que ça se gâte. En effet, bien que Edge supporte cette nouveauté depuis la version 15.0, les variables CSS ne fonctionnent malheureusement pas sur Internet Explorer...

Navigateurs supportant les variables CSS :

Firefox : 31.0
Google Chrome : 49.0
Microsoft Edge : 15.0
Safari : 9.1
Opera : 36.0

Comment utiliser des variables CSS ?

Maintenant que vous êtes convaincu de l’utilité des variables CSS, voyons comment les utiliser.

Tout d’abord un petit mot au niveau de l’héritage. Notons qu’il n’y a rien de spécial à signaler. Effectivement, la variable CSS s’hérite de la même manière qu'une valeur CSS normale (et heureusement :) ).

Apprendre par l’exemple est souvent bien plus efficace que des théories à n’en plus finir. C’est pourquoi je vous ai préparé 5 petits exemples couvrant des cas différents.

Exemple 1

Dans ce premier petit exercice, nous allons stocker la couleur brune dans une variable CSS appelée « --couleur-principale ». Puis, nous allons définir la couleur du texte de l’élément ayant l’ID « test » (une simple balise contenant un petit texte) en utilisant notre variable « --couleur-principale ».

On reconnait les variables CSS grâce au « -- » devant leur nom.

:root est une pseudo-classe CSS pouvant être utilisée afin de contenir différentes déclarations de variables qui seront utilisées par la suite. De cette manière, on évite la répétition.

...
<style>
	:root{
  		--couleur-principale: brown;
	}
	#test1{
		color:var(--couleur-principale);
	}
</style>
...

...
<p id="test1">Chez karac, nous créons des jolis sites internet</p>
...

Résultat :

Exemple 1 variable CSS

Exemple 2

Les variables CSS permettent de choisir une valeur par défaut au cas où notre variable n'est pas définie. Dans cette exemple, la variable «--couleur-secondaire» n'existe pas. Pour la couleur de fond du «test2», le navigateur va donc utiliser «--couleur-principale» à la place de «--couleur-secondaire».

...
#test2{
	background-color:var(--couleur-secondaire, var(--couleur-principale));
}
...

...
<p id="test2">Chez karac, nous créons des jolis sites internet</p>
...

Résultat :

Exemple 2 variable CSS

Exemple 3

Il est bien entendu possible d'utiliser ces variables pour d'autres paramètres n'ayant aucun rapport avec les couleurs. Changeons les marges haut et bas de notre «test3».

...
:root{
        ...
  	--marge-principale:50px 0px 25px 0px;
}
...
#test3{
	margin:var(--marge-principale);
}
...

...
<p id="test3">Chez karac, nous créons des jolis sites internet</p>
...

Résultat :

Exemple 3 variable CSS

Exemple 4

Nous pouvons aussi utiliser ces variables dans le cas de petits calculs. Dans ce quatrième exemple, nous voulons que les padding du «test4» aient une valeur comprise dans le multiple de 6 (afin de garder une cohérence de design).

...
:root{
        ...
  	--padding-de-base:6px;
}
...
#test4{
	padding-top: calc(var(--padding-de-base) * 2);
	padding-bottom: calc(var(--padding-de-base) * 3);
}
...

...
<p id="test4">Chez karac, nous créons des jolis sites internet</p>
...

Résultat :

Exemple 4 variable CSS

Exemple 5

Nous avons gentiment fait le tour de la question. Comme vous avez pu le remarquer, il n'y a vraiment rien de compliqué.

En bonus mixons notre code avec un peu de Javascript. Cas pratique : Il faut que le texte du «test5» devienne brun ("--couleur-principale") lorsque nous cliquons sur le bouton créé pour l'occasion.

...
<p id="test5">Chez karac, nous créons des jolis sites internet</p>
<p><button onclick="changerCouleur()">Changer la couleur en rouge</button></p>
...

<script type="text/javascript">
	function changerCouleur() {
	    var element       = document.getElementById("test5");
	    element.style.color = "var(--couleur-principale)";
	}
</script>

Résultat :

Exemple 5 variable CSS

Et pour finir, voici le code complet englobant les 5 petits exemples.

<html>
   <head>
      <meta charset="utf-8">
   <head>
      <style>
         :root{
  	    --couleur-principale: brown;
            --marge-principale:50px 0px 25px 0px;
  	    --padding-de-base:6px;
	 }
	 #test1{
	    color:var(--couleur-principale);
	 }
	 #test2{
	    background-color:var(--couleur-secondaire, var(--couleur-principale));
	 }
	 #test3{
	    margin:var(--marge-principale);
	 }
	 #test4{
	     padding-top: calc(var(--padding-de-base) * 2);
	     padding-bottom: calc(var(--padding-de-base) * 3);
	 }
      </style>
   </head>
   <body>
      <p id="test1">Chez karac, nous créons des jolis sites internet</p>
      <p id="test2">Chez karac, nous créons des jolis sites internet</p>
      <p id="test3">Chez karac, nous créons des jolis sites internet</p>
      <p id="test4">Chez karac, nous créons des jolis sites internet</p>
      <p id="test5">Chez karac, nous créons des jolis sites internet</p>
      <p><button onclick="changerCouleur()">Changer la couleur en rouge</button></p>
   </body>
</html>
<script type="text/javascript">
   function changerCouleur() {
      var element       = document.getElementById("test5");
      element.style.color = "var(--couleur-principale)";
   }
</script>

Sources

Catégories :

Tech web

Tags :

CSS HTML

Vous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !