Les propriétés personnalisées ou variables CSS
En informatique, une variable peut être définie comme un conteneur nommé qui peut stocker différentes valeurs durant le script. Ainsi on affecte une valeur à un nom 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 la notion de variable dans son langage. Les variables CSS sont également appelées “propriétés personnalisées”. Cependant elles ne sont pas exactement des variables au même sens que dans la plupart des langages de programmation (ex: en python) 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”.
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, un gros projet avec des feuilles de styles de plusieurs centaines de lignes pare exemple et possédant une charte graphique cohérente, nécessitera de 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 plutôt longue, sauf à prendre le risque de se perdre, il faut utiliser les variables. De cette façon changer une fois la valeur dans la déclaration de la variable permettra de la changer à chaque fois que la nom de la variable est utilisé dans la feuille de style.
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 aux variables.
Ici on a déclaré la propriété personnalisée puis on va 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éclare généralement les 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 la variable créée dans le code, il suffit de passer une fonction var() avec le nom de la variable (toujours préfixé avec deux tirets) en argument en valeur des propriétés concernées.
En outre 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 développeur ne définit pas de valeur spécifique pour l’élément enfant, il héritera de la valeur de la propriété de son parent.
Par ailleurs, il est impossible pour un navigateur de valider la valeur d’une propriété personnalisée a 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 extraordinaires (ex: passer une valeur en pixels à une propriété color). Dans de pareils cas, autrement dit lorsque le navigateur détecte une utilisation non valide d’une propriété personnalisée ou, plus précisément, 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 cause.
