C’est désormais une réalité. Nous pouvons enfin profiter des Propriétés Personnalisées ou CSS Custom Properties !
Mais avant tout, commençons par un bon <h2>, suivi d’un <p> pour résumer le sujet.
Les CSS Custom Properties ou Propriétés Personnalisées
Ou comment faire de la magie dans une feuille de styles CSS.
Les Propriétés Personnalisées CSS représentent un « nouveau » concept dans l’utilisation des feuilles de style. Pour résumer, il s’agit de variables accessibles directement dans le document CSS, et même depuis Javascript, de façon NATIVE.
Pourquoi ce « nouveau » entre guillemets ? Vous connaissez sûrement les préprocesseurs CSS. Ils ont longtemps été incontournables, mais avec l’arrivée des Custom Properties et la prise en charge croissante par les navigateurs, ils sont voués à disparaître à terme. En fin d’article, vous trouverez un tableau de compatibilité, mais sachez déjà que près de 70 % des utilisateurs disposent d’un navigateur compatible avec les Propriétés Personnalisées.
CSS et Propriétés Personnalisées
Pour bien comprendre l’intérêt par rapport à une feuille de styles classique, prenons un exemple sans Custom Properties, puis voyons comment le réécrire en utilisant ces variables.
Imaginons que nous voulons un body avec une couleur de fond spécifique, que nous réutiliserons ensuite pour la couleur du texte d’un bloc, et inversement, la couleur du texte du body deviendra la couleur de fond de ce bloc.
Le bloc .capa1 aura un padding de 20px, valeur que nous utiliserons aussi pour le margin-top de .capa2.
body{
background-color:#1b1b1b;
color:#fff;
}
.capa1{
padding:20px;
color:#1b1b1b;
background-color:#fff;
}
.capa2{
margin-top:20px;
}
Reprenons le même exemple, cette fois en utilisant les Propriétés Personnalisées.
:root{
--color1:#1b1b1b;
--color2:#fff;
--mainSpacing:20px;
}
body{
background-color:var(--color1);
color:var(--color2);
}
.capa1{
padding:var(--mainSpacing);
color:var(--color1);
background-color:var(--color2);
}
.capa2{
margin-top:var(--mainSpacing);
}
Avec :root, on déclare les variables, qui deviennent accessibles dans tout le document CSS. On utilise deux tirets — pour définir une variable et sa valeur. Pour les utiliser, il suffit d’appeler var(–VARIABLE);.
Imaginez maintenant l’avantage sur une feuille de styles de plus de 1000 lignes : il suffit de modifier une seule valeur pour qu’elle soit répercutée partout dans le CSS.
Aller plus loin
Ou même beaucoup plus loin. Car les CSS Custom Properties permettent de faire des calculs, d’effectuer des opérations conditionnelles et de définir des valeurs par défaut si une variable n’est pas définie. On dirait du Javascript, non ? Et pourtant, tout cela se fait directement dans la feuille CSS.
On peut additionner, multiplier, comparer différentes valeurs et appliquer l’une ou l’autre selon la condition.
.caja{
/*Si la variable1 n’est pas définie, 10px seront appliqués*/
margin-top:var(--variable1, 10px);
/*On peut aussi utiliser une variable comme valeur par défaut*/
padding-top:var(--variable1,var(--variable2));
/*On peut additionner, soustraire, multiplier et diviser (*attention à l’espace pour l’addition et la soustraction)*/
padding-top:calc(var(--variable1) + 10px);
height:calc(var(--variable1) - 5px);
line-height:calc(var(--variable1) * 2);
width:calc((var(--variable1) - 5px)/2);
}
Autres exemples :
:root{
/*On peut créer un texte à insérer plus tard dans un :before*/
--texto:"Cliquez pour voir";
}
.caja:before{
content:var(--text);
}
.caja2:before{
/*On peut ajouter du texte après la variable déclarée (par exemple, un lien vers un projet)*/
content:var(--text)' notre projet complet';
}
.caja2:before{
/*Ou l’utiliser pour un lien vers une actualité*/
content:var(--text)' notre actualité';
}
Exemple conditionnel :
:root{
/*Accessible via Javascript*/
--variableCond: if(x > 5) this.width = 10;
}
Compatibilité navigateur
Comme vous pouvez le voir, quasiment tous les navigateurs sont compatibles… Sauf Explorer ! Quelle surprise, je ne m’y attendais pas ! C’est l’occasion de se rappeler ces merveilleuses années où il fallait jongler avec Explorer 6.
Heureusement, aujourd’hui, moins de 4 % des utilisateurs sont encore sur Explorer. Rien de dramatique.
Au total, 70,9 % des internautes utilisent un navigateur compatible avec les Custom Properties. Un chiffre très élevé.
