Cela fait déjà quelques années que les intégrateurs ont entendu parler des variables CSS. La plupart d’entre nous utilisions et utilisons encore quotidiennement les variables des préprocesseur SASS ou LESS, mais nous n’avions pas porté forcément grand intérêt à celles-ci. Moi la première, j’ai d’abord pensé que les variables CSS faisaient le même boulot que celles d’un préprocesseur. Et pourtant…
Quelles différences entre variables CSS et variables de préprocesseur ?
Pour rappel, une variable css, ou propriété personnalisée, se déclare sur un sélecteur donné. Contrairement aux variables de préprocesseur, les valeurs peuvent être définies après l’appel de la variable. Je vous recommande la lecture de l’article CSS Variables : Le guide complet qui détaille de manière très complète l’utilisation de variables CSS.
Différentes selon chaque media query
Un premier intérêt (et pas des moindres !) des variables CSS, c’est qu’elles sont liées à un sélecteur. Leur valeur peut donc changer selon un nouveau sélecteur, ou même dans les media queries, contrairement aux variables SCSS dont la valeur reste fixe quelque soit le contexte.
Exemple : ici, la balise <body> a une font-size dont la valeur correspond à la variable –font. Selon la largeur de l’écran, la font-size diffère.
body {
font-size: var(--font);
}
@media (max-width: 767px) {
body {
--font: 14px;
}
}
@media (min-width: 768px) {
body {
--font: 16px;
}
}
Mixer les variables SASS et variables CSS
On peut aussi ajouter dans une fonction sass des variables css et s’éviter de créer un tableau de correspondance.
--success: green;
--warning: orange;
--error: red;
@each $step, in succes, warning, error {
step-#{$step} {
--step: $step;
}
}
L’utilisation des variables CSS permet de simplifier des lignes de code répétitives dans les feuilles de styles. Et plus la feuille de style est légère, puis on y gagne en webperf ! Elles ont des propriétés que les variables des préprocesseurs n’ont pas et inversement, il y a donc tout à gagner à utiliser les avantages des deux pour en tirer le meilleur profit.
Les variables CSS en inline dans le HTML
On peut les utiliser dans l’HTML via la balise style. Contrairement à une variable SASS qui elle, est définie directement dans les fichiers .scss. Une fois la compilation faite, il n’est plus possible de revenir dessus.
<div style=”--color: red;”/> <p> Lorem ipsum</p> </div> <div style=”--color: blue;”/> <p> Lorem ipsum</p> </div>
avec comme style CSS
div {
color: var(--color);
}
Le gain en terme de lignes de code écrites dans la feuille de style peut rapidement être important.
Une fois qu’on a compris que les variables CSS peuvent être des passerelles entre l’HTML et le CSS, le champ des possibles s’agrandit. On peut imaginer que dans les variables passées, on insère des valeurs numériques qui seront ensuite calculées pour de la mise en page.
Les systèmes de jauges sont régulièrement utilisés pour indiquer l’état d’avancement d’une action (profil complété, complexité d’un mot de passe, système de notation, formulaires complexes, barre de progression etc…).
Un système de notation allant de 1 à 100 / 100, générerait 100 classes CSS différentes :
Côté HTML :
<div class=”note-{{ note }}>
Note {{ note }}
</div>
Côté CSS
.note-1 {
width: 1%;
}
.note-2 {
width: 2%
}
etc…
Avec SASS, on limite le nombre de lignes écrites…
@for $note in 1 from 100 {
.note-#{$i} {
$width: $i * 1%;
width: $width;
}
}
…mais pas le nombre de lignes générées. Le code final est exactement le même que la première version en CSS :
.note-1 {
width: 1%;
}
.note-2 {
width: 2%;
}
etc…
En passant la note directement via la balise style on arrive à ça :
<div style=”--note: {{ note }}” class=”note”>
Note {{ note }}
</div>
.note {
width: var(--note)%;
}
Et.. c’est tout ! Une simple ligne de CSS, au lieu de 100 !
Ce genre de cas de figure est tout de même à utiliser avec parcimonie. En effet, mettre du CSS en inline ne doit pas être une pratique courante. Et à l’échelle industrielle d’un site, cela posera plus de problèmes au parseur CSS qui aura deux lectures CSS à faire.
Variabiliser les calculs
C’est là où la puissance des variables CSS peut prendre toute sa place. Sur la quasi-totalité des sites responsives, on a aujourd’hui des containers qui ont une taille selon les media queries. Ici on a un container qui fait 100% de la largeur sur mobile et tablette, puis des tailles fixes sur deux paliers.
@media (max-width: 979px) {
.container {
width: 100%;
}
}
@media (min-width: 980px) {
.container {
width: 900px;
}
}
@media (min-width: 1280px) {
.container {
width: 1200px;
}
}
On peut imaginer que dans ce container, on va trouver deux colonnes, qui sont l’une sous l’autre en mobile :
@media (max-width: 980px) {
.container {
width: 100%;
}
.section-droite,
.section-gauche {
width: 100%;
}
}
@media (min-width: 1000px) {
.container {
width: 990px;
}
.section-droite {
width: 660px;
float: left;
}
.section-gauche {
width: 330px;
float: right;
}
}
@media (min-width: 1280px) {
.container {
width: 1200px;
}
.section-droite {
width: 900px;
}
.section-gauche {
width: 300px;
}
}
En variabilisant la taille du container, on peut calculer la taille des sections avec une seule déclaration CSS :
--container: 100%;
--grille: 1; // Nombre de colonnes dans le container. Par défaut 1
--plage: 1; // Nombre de colonnes prises par les section. Par défaut 1
.container {
width: var(--container);
}
.section-gauche,
.section-droite {
width: calc((var(--container) / var(--grille)) * var(--plage));
}
@media (min-width: 1000px) {
--container: 990px;
--grille: 3; // Le container est divisé en 3 colonnes
.section-gauche {
--plage: 2; // La section de gauche va prendre 2 colonnes sur 3
}
}
@media (min-width: 1280px) {
--container: 1200px;
--grille: 4; // Le container est divisé en 4 colonnes
.section-gauche {
--plage: 3; // La section de gauche va prendre 3 colonnes sur 4
}
}
Au lieu de déclarer pour chaque media queries la taille du container et des sections, la propriété width est déclaré une seule fois et n’est donc pas surchargée.
Mais le meilleur reste à venir…
Là où on pourrait véritablement tirer encore plus profit des variables CSS, c’est lorsqu’on pourra récupérer le contenu d’un attribut avec la propriété attr() à l’instar de ce que l’on peut déjà faire avec le “content” d’un :before ou :after. Aujourd’hui, attr() n’est pas typé : le CSS ne sait pas s’il s’agit d’une chaine de caractères ou d’un nombre et se contente (quel bon jeu de mots !) de l’afficher tel quel. Lorsque nos navigateurs supporteront le typage des valeurs récupérées avec attr() alors nous passerons un nouveau cap. Il y a fort à parier que les feuilles de style s’allègeront, et que le plein pouvoir des variables s’associera aux calculs calc(), min(), max() et clamp() ! On n’a pas fini de redécouvrir notre bon vieux CSS.
Photo par Yoav Hornung via Unsplash
