Les variables CSS ou propriétés personnalisées

C’est génial, il était temps et en même temps trop tôt, trop tard. Trop tôt parce qu’il a fallu attendre longtemps avant la compatibilité. Problème réglé, Internet Explorer ne supporte pas les variables CSS, mais Microsoft non plus ne supportera plus Internet Explorer cette année si ce n’est déjà fait ! Voilà une chose de réglée, vous pouvez utiliser les variables CSS en toute confiance.

SCSS vs CSS

D’ailleurs Bootstrap 4 passe aux propriétés personnalisées. Il y a plusieurs variables directement dans son fameux cadriciel qui ne supporte plus lui non plus Internet Explorer. Il faut dire que Bootstrap 4 a passé à la technologie Flex tout aussi incompatible IE... Trop tard parce qu’il existe maintenant des « préprocesseurs CSS » comme SASS ou LESS beaucoup plus puissant et pratique.

Vous aller me dire l’un n’empêche pas l’autre ? Pas vraiment, et c’est la grande faiblesse du CSS. Une force du CSS c’est l’héritage entre les classes. C’est-à-dire que les propriétés héritées proviennent de l’élément parent par rapport à l’arbre du document (DOM). En d’autres mots, créer une classe signifie souvent modifier une classe déjà existante. Le meilleur exemple c’est le « reset ». À peut prêt tous les sites Web modernes utilisent un petit fichier CSS pour réinitialiser la feuille de style de base. Pour la simple et bonne raison de normaliser ces styles qui changent un tantinet selon le navigateur et la plateforme. On notera au passage que ce menu problème provient du manque de sérieux, de respect et de solidarité des développeurs de navigateur.

Menu problème multiplié par le nombre de pages vues au monde, en d’autres mots une quantité pharaonique d’énergie pour rien ! Mais là ne s’arrête pas l’empilage, ajouter à cela un cadriciel comme Bootstrap et vous ajouter une autre couche, une troisième modification des mêmes styles. Cette fois beaucoup plus considérable. D’ailleurs Bootstrap nous conseille de ne pas modifier sa feuille de styles, mais de créer un fichier « perso », c’est à dire une quatrième modification de suite, et aucun code HTML n’a encore été interprété. Ajouter maintenant les composantes qui rejoue le film, parfois pour rien, un menu, un carrousel et j’en passe. Un peux comme le jQuery qui réinvente le JavaScript, alors que certaine composante de la page utiliser du JavaScript Vanilla !

Un exemple vaut milles mots. MDN web docs dit dans son tutoriel Les variables CSS : « ...LESS ou Sass peuvent faciliter cette tâche, mais peuvent également complexifier le processus de création en ajoutant une étape de compilation » Une étape, une étape !! Et alors, une seule fois ? Pendant qu’une variable CSS le fait à l’infini ! Le deuxième avantage des variables CSS toujours selon MDN est la sémantique « ...le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent alors plus facile à lire et à comprendre... » Hein ! Bien oui, les variables CSS héritent des avantage du CSS, bien sûr ;- )). Ça doit être une mauvaise traduction !

Et alors me direz-vous ? Et alors ??? ;- ) C’est vrai qu’il est question de ressources du navigateur, en d’autres mots exécuté par la machine de l’internaute. Qu’est-ce que ça peut faire au webmestre! Mais c’est quand même un des pires gaspille d’énergie (après la page blanche du moteur de recherche de Google qui devrait être en noir pour sauver des tonnes de kWh). Vous rendez-vous compte que votre page Web changera à plusieurs reprises la même classe et ce à chaque chargement de la page ! C’est comme refaire la peinture à chaque fois qu’un client entre dans votre magasin et surtout toujours de la même couleur !! L’idée serait acceptable pour une manipulation dynamique. Par exemple avec le Shadow DOM ou encore si l’usager peut choisir son style, une page claire ou une page foncée ou encore agrandir le texte. Mais ce n’est pas le rôle des variables CSS, il suffit de travailler directement les classes en JavaScript ou carrément charger une nouvelle feuille de style. Personnellement j’aime qu’un style soit fixe et ne requiers qu’un minimum de ressources. Et c’est la bible du programmeur, c’est clairement dit dans la documentation CSS. C’est avant toute chose de l’automatisation.

Et c’est précisément ce que j’aime avec Sass. C’est-à-dire la possibilité de créer une feuille de style personnalisé, mais une seule fois, beaucoup plus simple et surtout légé. Mieux, au lieu d’ajouter un fichier perso, on peut modifier directement les feuilles de styles des composantes ou du cadriciel qui fournissent au demeurant les fichiers Sass pour ce faire. Voilà pourquoi il est sans doute trop tard, Sass est aussi arrivé dans le paysage avec davantage de puissance et de compatibilité...

Il y a un autre problème avec les variables CSS, la validation. C’est impossible au navigateur de valider une variable. --ma-variable-couleur peut avoir la valeur 10em sans problème. Mais 10em n’est pas une couleur. L’erreur sera évidente seulement lors de l’utilisation de cette variable. Et que fait le navigateur ? Au lieu d’utiliser la déclaration précédente comme le CSS le fait, il utilise la valeur héritée ou la valeur initiale du navigateur... L’opération demande d’ailleurs plus de ressources ...encore une fois.

Variables CSS

Voilà pour l’explication, pourquoi demander à un navigateur de faire toujours le même traitement dès l’ouverture d’une page quand on peut le faire en une seule fois lors de la création d’un site Web ! Bon, c’est quand même un outil dans notre boite à coffre à outils ;- ) Alors, voyons de plus proches ces variables CSS.

L’idée est simple, vous avez une valeur, une couleur par exemple, qui se répété un peu partout dans votre feuille de style. Au lieu de recopier la valeur à chaque fois il suffit d’utiliser une variable dont la valeur sera assignée au début de la feuille de style. La variable se définie simplement avec deux tiret devant --ma-variable-css : #eeeeee; qu’on peut utiliser ailleurs avec la fonction fonction var() de cette façon : color: var(--ma-variable-css);. C’est tout !

Exemple

En déclarant une variable dans la pseudo-classe :root, c’est-à-dire globale, on peut la réutiliser dans n’importe qu’elle classe de notre page Web :

:root {
  --ma-couleur-de-base: blue;
}

a {
  color: var(--ma-couleur-de-base);
}

h1 {
  color: var(--ma-couleur-de-base);
}

hr {
  color: var(--ma-couleur-de-base);
}

Une variable peut avoir deux paramètres, à l’instar du CSS qui passe les erreurs sans problème, la variable CSS peut être définie avec deux valeurs. Si la première n’est pas définie, le navigateur utilisera la deuxième. Mais attention, au risque de problèmes de performances, car le navigateur doit analyser l’ensemble des variables pour voir si elles sont disponibles. Toujours, à chaque ouverture de la page ad vitam æternam ne l’oublions pas ! Dans l’exemple suivant, ma-classe utilisera blue si la variable --ma-couleur-de-base n’est pas définie.

.ma-classe {
  color: var(--ma-couleur-de-base, blue); 
}

Ou encore en imbriquant une variable dans une variable !

.ma-classe {
  color: var(--ma-couleur-de-base, var(--autre-couleur, blue)); 
}

Un aspect intéressant c’est l’héritage des propriétés personnalisées. Si une variable est déclarée dans une classe, toutes les classes enfant hériterons de sa valeur à moins de modifier cette valeur. C’est-à-dire, hé oui, qu’une même variable peut avoir plusieurs valeurs comme le démontre l’exemple de MDN :

<div class="ma-classe">
  <div class="ma-classe-deux">
    <div class="ma-classe-trois">
    </div>
    <div class="ma-classe-quatre">
    </div>
  </div>
</div>

.ma-classe-deux {
  --ma-variable-un: blue;
}

.ma-classe-trois {
  --ma-variable-deux: green;
}

Même si la classe ma-classe-trois hérite de la classe ma-classe-deux, elle aura sa propre valeur. Alors que la classe ma-classe-quatre héritera effectivement de la classe ma-classe-deux. Une petite flexibilité fort pratique...

Manipulation des variables en JavaScript

Voilà un bel exemple des plus pratique, une bonne raison d’utiliser les variables. Sans variable, il faudrait faire une boucle JavaScript pour manipuler plusieurs classes en même temps. Ou pire, les modifier l’une après l’autre. Mais avec des variables CSS, il suffit de modifier la variable en JavaScript et le tour est joué. Ceci dit, ça explique en partie les ressources considérables que demande le navigateur pour les utiliser...

// obtenir une variable
element.style.getPropertyValue("--ma-variable");

// définir une variable
element.style.setProperty("--ma-variable", maVariableJS);

Exemple : Ajuster le texte avec une variable CSS

Voilà un exemple intéressant de Stephen Shaw qui permet de modifier dynamiquement une variable CSS à l’aide du JavaScript. Un petit script qui permet d’ajuster la grandeur du texte à l’aide d’une variable CSS. Peu importe la longueur du texte, il sera automatiquement ajusté pour « fitter » la largeur disponible. Le tout à l’aide d’une variable CSS --length mais aussi avec un petit calcul CSS calc() et un petit JavaScript.

<style>
[data-fit-text] {
  /* Dimensionné via la fenêtre d'affichage, mais la variable --width peut être définie en JS en fonction de la largeur de l'élément ou du parent. */
  --width: 100vw;

  /* Ajustez l'échelle en fonction de votre police exacte.  */
  --scale: 0.9;

  font-size: calc(var(--width) / (var(--length, 1) * 0.5) * var(--scale, 1));

  font-weight: 600;
  line-height: 1;
  margin: 1rem 0;
}
</style>

<div data-fit-text>Fit Text</div>
<div data-fit-text>Avec des variables CSS</div>
<div data-fit-text>Un texte plus long qui tient aussi...</div>
<div data-fit-text>N'oubliez pas ce texte!</div>
<div data-fit-text>Cela peut fonctionner avec un texte très long si vous le voulez vraiment, mais ça va être difficile à lire ...</div>

<script>
  [...document.querySelectorAll("[data-fit-text]")].forEach(el => {
  // Nous avons juste besoin de la longueur de la chaîne en tant que variable CSS ...
  el.style.setProperty("--length", el.innerText.length);
});
</script>