Télécharger le PDF du cours
Qu’est-ce qu’une propriété personnalisée ou variable CSS ?
Une variable en informatique est un conteneur nommé qui va pouvoir stocker différentes valeurs durant le script. Vous pouvez imaginer une variable comme une boite qui ne va pouvoir contenir qu’un objet à la fois mais dont on va pouvoir changer l’objet stocké lorsqu’on le souhaite.
Le principe d’utilisation des variables est relativement simple à comprendre : on affecte une valeur à un nom (à notre variable donc) pour ensuite utiliser le nom de la variable plutôt que la valeur partout dans notre code. Lors de l’analyse du code, le nom de la variable sera remplacé par la valeur avant d’afficher la page à l’utilisateur.
Le CSS a introduit il y a peu de temps ce concept de variable dans son langage. Les variables CSS sont également appelées “propriétés personnalisées”. Notez que les “variables” CSS ne sont pas exactement des variables au même sens que dans la plupart des langages de programmation car certaines propriétés inhérentes aux variables sont manquantes en CSS et c’est la raison pour laquelle on les appelle plutôt “propriétés personnalisées”.
Pourquoi utiliser des propriétés personnalisées ou variables CSS ?
Les principaux intérêts liés à l’utilisation des propriétés personnalisées en CSS sont la création d’un code plus clair et plus facilement maintenable. En effet, imaginez que vous travailliez sur un gros projet avec des feuilles de styles de plusieurs centaines ou milliers de lignes.
Si le projet possède une charte graphique cohérente, vous aurez à réutiliser les mêmes styles (couleur, taille de police, marges, etc.) à plusieurs endroits dans la feuille de style.
Dans le cas d’une feuille de style longue, il est facile de rapidement se perdre et donc l’approche sans utilisation de variable est peu adaptée. De plus, si un jour vous deviez modifier la couleur principale du thème par exemple, vous devrez modifier la valeur liée à cette couleur à travers toute la feuille de style ce qui rend le code difficilement maintenance au final.
Les variables résolvent ces deux problèmes : en effet, en utilisant les variables, nous allons affecter une valeur à une variable une bonne fois pour toutes puis ensuite utiliser le nom de notre variable pour gaffer référence à la valeur dans toute notre feuille de style.
Ainsi, si on doit un jour changer une valeur, nous n’aurons qu’à mettre à jour la valeur affectée à la variable dans le code et n’aurons pas à modifier le reste du code puisque le nom de la variable n’a pas à changer.
Ensuite, on peut donner n’importe quel nom à une variable. Cela permet de s’y retrouver beaucoup plus facilement dans une feuille de style puisqu’on va généralement donner des noms qui font du sens à nos variables comme “main-color” (couleur principale) pour stocker la couleur principale du site par exemple.
Apprendre à utiliser les variables ou propriétés personnalisées CSS
La mise en place des propriétés personnalisées en CSS va se faire en deux temps : on va commencer par déclarer notre propriété personnalisée puis on va ensuite utiliser la variable créée.
On déclare une variable en CSS en utilisant la notation --nom-de-la-variable : valeur. On préfixe donc le nom de la variable choisi par un double tiret.
On déclarera généralement nos propriétés personnalisées à l’intérieur de sélecteurs très larges comme :root (qui est équivalent au sélecteur html mais qui possède un niveau de précision plus fort) afin de pouvoir les réutiliser partout.
Pour utiliser ensuite notre variable dans le code, il nous suffit de passer une fonction var() avec le nom de notre variable (toujours préfixé avec deux tirets) en argument en valeur des propriétés concernées.
Notez que l’héritage se fait de la même manière pour les propriétés personnalisées que pour les propriétés classiques. Ainsi, si un ne définit pas de valeur spécifique pour élément enfant, il héritera de la valeur de la propriété de son parent.
Contrôle de la validité des valeurs et gestion des erreurs
Il est impossible pour un navigateur de valider la valeur d’une propriété personnalisée à priori puisque lorsque la valeur est lue, il ne sait pas encore où elle va être utilisée c’est-à-dire avec quelles propriétés on va l’utiliser.
Cela oblige donc le navigateur à considérer toute valeur (ou presque) comme valide et cela permet donc d’utiliser certaines valeurs dans des contextes ou cela ne fait aucun sens (comme passer une valeur en px à une propriété color par exemple).
Dans ces cas là, c’est-à-dire lorsque le navigateur détecte une utilisation non valide d’une propriété personnalisée (ou plus exactement lorsqu’il analyse une substitution avec var() invalide), il va plutôt utiliser la valeur initiale ou la valeur héritée de la propriété en question.
