Petit guide d’utilisation des variables CSS

Actualisé le 31 octobre 2017 - , , ,

Bon aujourd’hui on dépoussière de la vielle nouveauté, les variables CSS ! A travers ce petit guide d’introduction vous pourrez revoir les concepts de base pour vous lancer  si vous n’avez pas encore passé le pas.

Que signifie le :root en CSS ?

Le root est un sélecteur,  répandu récemment avec l’apparition des variables CSS. Il permet indifféremment du type de document de sélectionner le nœud le plus haut dans l’arbre, en l’occurrence dans une page web classique l’élément “html”, en ayant un point plus fort que le sélecteur “html”. Il va permettre notamment de définir des variables CSS globales à l’ensemble de la page.

Comment définir une variable CSS ?

C’est très simple, il suffit de faire précéder le nom de la variable par 2 tirets comme ceci :

Comment appeler une variable CSS ?

La fonction var() vous permettra de lire la valeur d’une variable CSS :

Les variables CSS, une histoire de scope

Dans l’exemple précédent nous avons défini une variable au niveau du selecteur :root, ce qui nous permet de définir une variable globale, accessible depuis l’ensemble de notre CSS. Mais lorsque l’on définit une variable au niveau d’un sélecteur plus précis, notre variable ne sera disponible que dans le cadre de ce scope. Cela amène un côté très intéressant puisque l’on va pouvoir définir localement une valeur différente pour variable exploitée dans différents scopes :

Bon à savoir, ce sera toujours la variable locale qui prendra le dessus sur la variable globale, donc si vous redéfinissez une variable localement et déjà déclarée dans le :root par exemple, la valeur locale sera prise en compte.

Un exemple général reprenant ces principes :

0

Utilisation de la fonction calc

Bon c’est bien, on est content de pouvoir manipuler des couleurs, mais ça ne se limite pas qu’à cela ! N’importe quelle valeur peut être attribuée à une variable, et encore mieux, les variables type numérique vont nous permettre en association avec la fonction Calc de faire des calculs dynamiques, par exemple pour faire une grille dynamique :

Dans cet exemple on va être en mesure de calculer dynamiquement la taille des colonnes en fonction de leur nombre : [Largeur totale en %] / [Nombre de colonne], on vient ensuite soustraire la taille en px du gutter qui va s’appliquer à gauche et droite, c’est pourquoi on le multiplie par 2.
Oui si vous l’avez bien remarqué, on est en mesure de soustraire des px à une valeur en pourcentage, et là ça commence à devenir encore plus intéressant !

Il faut savoir que vous avez la possibilité de faire des calculs en mixant les unités, le navigateur va être en mesure de calculer tout cela que ce soit du %, em, px…

0

Et quel est le support de Calc et des variables CSS ?

Tout ce petit monde a déjà été implémenté depuis quelques années, et on est à ce jour à un support suffisant pour l’utiliser sans trop de problèmes, plus concrètement, Edge, Firefox, Chrome et Safari supportent les deux depuis déjà quelques versions. Les variables CSS ne sont toutefois par supportées sur IE11 contrairement à Calc.

Si vous vous posez la question, oui les variables CSS sont pleinement compatible avec les préprocesseur comme Sass ou Less.

 

Bon clairement vous avez pu le constater, vu le niveau de difficulté d’utilisation et le support il serait dommage de se passer des variables CSS. Côté usage, on l’a entrevu, on peut facilement créer des grilles mais aussi imaginer des blocs CSS très modulaires, des thèmes complets dynamiques (on peut en JS changer une variable CSS), faire des calculs de marges, débord, assez facilement et bien plus encore. Si je devais voir une limite à cela, ce serait la question de la performance, car ici on ajoute une couche supplémentaire qui fait qu’il y a plus de travail côté CSS, donc attention à ne pas trop alourdir inutilement le navigateur au risque de ralentir les performances de rendu.

Tout ce qui peut être pré-calculé et qui ne dépend pas de l’instance du navigateur devrait dans l’idéal être fait dans un préprocesseur ce qui évite des calculs supplémentaires côté CSS. Bref, outre cela, il n’y a pas de raison de s’en passer.

Commentaires

Laisser un commentaire

  • CyberFufu dit:
    J'avais déjà vu et lu des articles (notamment chez miss Verou) avec des variables css, par contre en pratique j'avais jamais trouvé l'utilité par rapport à la methode sass > css qui permet aussi d'avoir des variables qu'on compile... si je comprends bien le seul intérêt c'est si on veut premettre de rendre un élément dynamique via JS (ou si on n'aime pas sass/less et qu'on veut tout écrire en css :) ) Sur la grille en tous cas ça fait un css plutôt élégant, GG.
  • meetjey dit:
    Effectivement :) L'usage est juste différent, les variables SASS restent figées dans le marbre une fois compilée, alors que les variables CSS peuvent être modifiées à n'importe quel moment après le chargement de la page et prendre en compte des paramètres extérieurs comme la taille d'écran, c'est très puissant, notamment pour le responsive, cela va permettre de gérer des cas beaucoup plus fins, mais actuellement les deux restent complémentaires car la finalité n'est pas la même.