Les variables CSS ou CSS custom properties ou encore propriétés CSS personnalisées (pour ne fâcher personne), permettent la déclaration et l'utilisation de variables en cascade dans une feuille de styles. Concrètement, que cela signifie t-il ?
Grâce aux propriétés CSS personnalisées (on les nommera ainsi tout au long de l'article) il vous sera possible de mieux gérer votre code, de l'alléger mais surtout celui-ci gagnera en lisibilité et en maintenabilité. Cela va s'avérer d'autant plus vrai pour un site web de grande envergure.
Le principe est plutôt simple, mais risque de déboussoler les amateurs de Sass , Less ou autres pré-processeurs.
Les propriétés personnalisées : comment ça marche ?
Dans un premier temps, sachez que les propriétés personnalisées reposent sur le même fonctionnement que les propriétés CSS classiques. Les notions de cascade et d'héritage (modèle parent-enfant) sont toujours prises en compte. Jusque là, rien de nouveau.
Concrètement, une propriété personnalisée va nous permettre de donner une valeur et de lire la valeur déclarée à l'intérieur de la propriété. Vous pouvez donner le nom que vous souhaitez à votre propriété. Attention toutefois, les propriétés personnalisées sont sensibles à la casse.
La syntaxe, à première vue, peut s'avérer déroutante pour certains :
p {
--primary-color: red;
}
p a {
color: var(--primary-color);
}
Dans ce code ci-dessus, nous avons utilisé dans l'élément pun double tiret, puis déclaré notre propriété personnalisée primary-color.
Il existe plusieurs raisons au fait que les propriétés personnalisées s'écrivent avec un double tiret. D'une part, pour éviter la confusion avec les préfixes comme -webkit-transition par exemple, d'autre part l'idée d'utiliser la syntaxe $var, a été rejetée car elle aurait été traitée par le préprocesseur CSS.
Il est possible de déclarer dans la fonction var() une valeur de recours (un fallback) qui est utilisée au cas où la valeur de substitution par la propriété ne serait pas définie.
p {
color: var(--primary-color, red);/*si --primary-color n'est pas défini, alors la couleur est rouge*/
}
Pseudo-classe :root
Il s'agit de l'élément racine. Cette pseudo-classe a pour fonction, dans un document HTML, de cibler l'élément html. C'est en quelque sorte l'équivalent du sélecteur html mais d'un niveau supérieur.
En utilisant les propriétés personnalisées, il est préférable de les déclarer dans cette pseudo-classe, bien que vous puissiez également placer des propriétés personnalisées au sein d'une déclaration.
:root {
--main-color: black;
--font-size: 1rem;
--p-color: red;
--margin-paragraphe: 10px;
--grid-width: 25%;
}
.class{
--size: 25%; /*on peut déclarer une variable dans une déclaration n'importe où dans la feuille de styles*/
height: var(--size);
width: var(--size);
}
A tout moment dans votre feuille de styles, il vous est possible de changer la valeur d'une propriété :
h1 {
--main-color: blue
}
currentcolor : première variable CSS
Ce mot-clé, représentant la valeur calculée de la propriété color, est très pratique dans certaines situations. Il s'agit de l'équivalent de la valeur inherit qui permet l'héritage d'un élément parent.
Exemple concret de la valeur currentcolor :
body{
color:#333
}
a{
color:currentcolor;/*le lien prendra la couleur renseignée dans le body*/
}
Le plus étonnant est de savoir que cette valeur peu connue est supportée par une majorité de navigateurs, dont Internet Explorer 9+.
Exemples d'utilisation :
Les propriétés personnalisées vont être particulièrement utiles dans certains cas :
- Mettre en place différents thèmes de couleur sur un site.
La règle @property fait partie de l'API CSS Houdini. Celle-ci permet d'enregistrer une propriété personnalisée directement dans une feuille de styles sans avoir recours à JavaScript. C'est justement l'équivalent de la méthode CSS.registerProperty en JavaScript. Pour l'heure, la compatibilité est assez pauvre.
En utilisant la règle @property, on enregistre donc une nouvelle propriété personnalisée. Cela permet la vérification des types de propriétés. On indique ensuite des valeurs par défaut et on détermine si une propriété peut hériter ses valeurs ou non. Voici comment la règle se présente :
Un exemple qui rend @property très pratique avec une transition sur un dégradé :
Votre navigateur ne prend pas en charge cette démonstration
survolez-moi
Source, inspiration, ressources :
Il existe un bug sur Edge 15 avec les pseudo-élements (::before,::after, ::selection...). Il peut y avoir des comportements inattendus. Par exemple, si vous appliquez un fond avec une propriété personnalisée sur un pseudo-élément, ne vous étonnez pas si le fond s'étale sur l'ensemble de la boîte.
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.