Guide du débutant sur les variables CSS (également appelées propriétés personnalisées CSS)

Table des matières:

• Variables CSS dans les préprocesseurs #
• Variables (Propriétés personnalisées) en CSS natif #
• Pourquoi "Propriétés personnalisées" ? #
• Où sont définies les variables CSS ? #
• Notes techniques sur les variables CSS #
• Comprendre la fonction var() #
• Utiliser des variables CSS avec calc() #
• Astuces avec les variables CSS #

Variables CSS dans les préprocesseurs

Les préprocesseurs CSS utilisent les variables CSS depuis plus de 10 ans. Je n'entrerai pas dans les détails de ces options ici, mais je pense qu'il est utile de savoir comment chacune des bibliothèques de préprocesseurs populaires utilise des variables.

Dans Sass (ou SCSS), vous déclarez les variables comme suit :

Remarquez le signe dollar ($). La première ligne est la déclaration de la variable et sa valeur. Les deux blocs qui suivent sont des exemples des variables utilisées plus loin dans la feuille de style.

Les variables dans Less.js utilisent le symbole @ :

Et dans Stylus, les variables ressemblent à ceci :

Vous pouvez consulter les sections de documentation individuelles pour chacun des préprocesseurs indiqués ci-dessus si vous souhaitez approfondir les variables utilisant ces technologies tierces.

Variables (propriétés personnalisées) en CSS natif

Cela nous amène aux variables CSS, ou propriétés personnalisées, telles qu'elles sont définies dans la spécification CSS. Pour déclarer une variable en CSS simple, placez deux traits d'union devant le nom personnalisé que vous choisissez pour la variable ou la propriété, puis utilisez la fonction var() pour placer cette valeur où vous le souhaitez :

Dans cet exemple, j'ai défini deux variables CSS : --main et --accent . J'ai ensuite utilisé chaque variable CSS sur deux éléments différents, démontrant la flexibilité qu'ils ouvrent.

Comme pour les variables dans n'importe quel langage de programmation, cela vous permet de déclarer une variable à un seul endroit. Si vous voulez plus tard changer cette valeur partout dans votre feuille de style, il suffit de changer la déclaration d'origine et elle s'appliquera à tous les endroits où vous utilisez la variable.

Pourquoi "Propriétés personnalisées" ?

Dans la conversation de tous les jours, les développeurs font souvent référence à cette fonctionnalité en tant que "variables CSS", conformément à la façon dont les préprocesseurs et les langages de programmation se réfèrent à la même fonctionnalité. Mais d'un point de vue strictement technique, ce ne sont pas vraiment des « variables », mais plutôt des propriétés personnalisées .

Ils ont la même syntaxe que n'importe quelle propriété prédéfinie dans CSS, à l'exception des deux tirets qui apparaissent devant le nom de la propriété. Les deux tirets permettent aux auteurs CSS d'utiliser n'importe quel identifiant en pointillé valide sans crainte de conflit avec les propriétés CSS habituelles.

La spécification explique que deux tirets seuls sont invalides (apparemment réservés à une utilisation future) et CSS ne donnera jamais de sens à un identifiant en pointillé valide au-delà de son utilisation en tant que propriété personnalisée définie par l'auteur.

Contrairement aux propriétés CSS classiques, les propriétés personnalisées sont sensibles à la casse. Cela signifie que --main-color n'est pas identique à --Main-Color . Les caractères valides à inclure dans le nom de la propriété personnalisée sont les lettres, les chiffres, les traits de soulignement et les traits d'union.

Où sont définies les variables CSS ?

Comme vous pouvez le voir dans l'exemple que j'ai fourni ci-dessus, vous verrez souvent des propriétés personnalisées CSS définies directement sur l'élément racine d'un document HTML ou d'un DOM fantôme. Le sélecteur de pseudo-classe :root accomplit cela.

Mais les variables CSS ne se limitent pas à être définies uniquement sur l'élément racine et il est souvent avantageux de les définir ailleurs. Le sélecteur :root est généralement choisi car il cible toujours l'élément le plus haut dans l'arborescence DOM (qu'il s'agisse du document complet ou du DOM fantôme).

Dans la plupart des cas, vous obtiendrez le même résultat en définissant des propriétés personnalisées sur l'élément html (qui est l'élément racine dans les documents HTML) ou même sur l'élément body . L'utilisation :root permet au code d'être plus évolutif (par exemple, si la spécification ajoute un jour un nouvel élément en tant que racine, le CSS resterait le même) et je suppose qu'il permet également à une feuille de style de s'appliquer à un autre type de document qui a un élément racine différent.

Par exemple, le code suivant limiterait vos propriétés personnalisées à une utilisation uniquement dans l'élément .sidebar :

À des fins de démonstration, vous verrez souvent des variables définies sur :root , mais vous pouvez les utiliser partout où c'est pratique. En fait, de nombreux développeurs recommandent de les placer plus bas dans l'arborescence DOM pour les modules plus petits lors du développement initial, puis de remonter vers :root lorsque vous créez des valeurs dont la portée est plus large.

Notes techniques sur les variables CSS

En plus de pouvoir s'appliquer à n'importe quel élément, les variables CSS sont assez flexibles et faciles à gérer.

Voici quelques éléments à noter :

• Ils sont résolus avec des règles d'héritage et de cascade CSS régulières
• Vous pouvez les utiliser dans les requêtes multimédias et autres règles conditionnelles
• Vous pouvez les définir dans l'attribut style d'un élément
• Ils peuvent être lus ou définis à l'aide des fonctionnalités du modèle d'objet CSS.

Il est également à noter que vous pouvez essentiellement imbriquer des variables CSS. Notez l'exemple suivant :

Remarquez que j'ai défini une variable --main-color puis j'utilise ce même nom de variable comme valeur pour la variable CSS suivante.

Vous pouvez également utiliser le mot-clé !important dans une valeur de variable CSS, mais cela applique uniquement « l'importance » à la variable elle-même par rapport aux autres définitions de variable et non à la valeur utilisée sur un ou plusieurs éléments du document. Si cela prête à confusion, voici un exemple :

Dans l'exemple ci-dessus, la couleur d'arrière-plan serait "bleu clair", même si l'orange apparaît plus tard dans les définitions de variables. Mais la valeur de fond elle-même sur l'élément body n'aurait aucune importance.

Les variables CSS peuvent également contenir des valeurs de mots-clés à l'échelle de CSS comme initial , inherit et unset mais la propriété all n'affecte pas les variables CSS (c'est-à-dire qu'elles ne sont pas réinitialisées).

Comprendre la fonction var()

Vous avez déjà vu la fonction var() utilisée dans quelques exemples typiques de ce tutoriel sur les variables CSS. Mais il y a plus à var() que ce que j'ai couvert jusqu'à présent.

Premièrement, la fonction var() n'est valide que dans une valeur ; un nom de propriété ou un sélecteur ne peut pas utiliser une variable CSS. De plus, une valeur de requête multimédia ne peut pas utiliser de variable CSS (par exemple @media (max-width: var(--my-var)) n'est pas valide).

La fonction var() prend deux arguments :

• Le nom de la propriété personnalisée à inclure
• Une valeur de secours au cas où la propriété personnalisée n'est pas valide

Voici un exemple où le deuxième argument prend effet :

Remarquez que dans le code ci-dessus, j'ai épelé le nom de la variable initiale en utilisant le mot britannique ou canadien « couleur », mais lorsque j'ai utilisé la variable, j'ai incorporé l'orthographe américaine « couleur ». Cela rend la variable techniquement invalide et donc le fond gris uni ( #ccc ) prend effet à la place.

Notez également qu'une valeur de repli peut contenir ses propres virgules. Ainsi, par exemple, si votre solution de secours est une pile de polices, ce serait une manière valide de la définir :

Remarquez à nouveau que ma variable a un défaut, déclarant un --main-type inconnu au lieu de --main-font . Cela déclenche la valeur de repli, qui est une pile de polices alternative. Ainsi, tout ce qui suit la première virgule (y compris toutes les autres virgules) est la valeur de repli.

Utiliser des variables CSS pour les partiels

Lors de la définition d'une variable CSS, la valeur qu'elle contient n'a pas besoin d'être une valeur CSS valide en elle-même ; il peut s'agir d'une valeur partielle pouvant être utilisée dans le cadre d'une valeur complète.

Par exemple, vous pouvez décomposer une pile de polices :

Dans ce cas, chacune des valeurs de variable fonctionne par elle-même, mais cela démontre le point. Essayons un exemple plus artificiel en utilisant la notation de couleur rgba() :

Vous pouvez voir à quel point cela peut être utile, vous permettant essentiellement de « construire » des valeurs de manière dynamique.

Utiliser des variables CSS avec calc()

L'un des moyens utiles d'incorporer des variables CSS dans vos projets est en conjonction avec la fonction calc() . Comme vous le savez peut-être, calc() vous permet d'effectuer des calculs dans une valeur. Vous pouvez donc faire quelque chose comme ceci :

Les propriétés personnalisées CSS vous permettent de faire passer calc() au niveau supérieur, par exemple avec des tailles prédéfinies. Ahmad Shadeed a décrit quelque chose de similaire et voici un exemple :

Avec cela en place, je peux utiliser les ensembles de .module et .module-* dans les requêtes multimédias, ce qui me permet d'afficher ces styles de manière conditionnelle pour des tailles de fenêtre d'affichage spécifiques ou d'autres fonctionnalités multimédias. Les petits/moyens/grands modules auraient les mêmes classes que le module principal, mais seule la taille du module est écrasée si nécessaire. Dans l'exemple ci-dessus, la valeur initiale de 240 pour la taille agit comme une sorte de valeur par défaut, mais je pourrais également passer 240px comme deuxième argument dans var() pour fonctionner comme une solution de secours.

Astuces avec les variables CSS

Plusieurs développeurs ont partagé des trucs et astuces en utilisant les variables CSS au fil des ans. Je ne développerai pas ceux-ci en détail ici car il s'agit principalement d'un didacticiel pour débutants, mais voici un bref aperçu de certains:

• Comme je l'ai mentionné précédemment, vous pouvez utiliser des variables CSS dans les styles en ligne, comme dans le cas des boîtes de rapport d'aspect.
• Un caractère d'espace est une valeur valide pour une variable CSS, qui vous permet de faire une astuce marche/arrêt (par exemple pour quelque chose comme le mode sombre), que vous pouvez lire dans le post de Lea.
• Vous ne pouvez pas écrire de styles de survol dans les styles en ligne, mais vous pouvez contourner cela en utilisant des variables CSS.
• Les variables CSS aident à créer plus facilement des SVG multicolores, comme indiqué ici.
• Vous pouvez créer des systèmes de conception et des thèmes pratiques et maintenables avec des variables CSS, expliqués en détail dans cet article.
• Vous pouvez utiliser des variables CSS pour créer des grilles plus efficaces et maintenables à l'aide des fonctionnalités de disposition de grille, comme décrit par Michelle Barker.

Conclusion

Les variables CSS, ou propriétés personnalisées CSS, sont prêtes à l'emploi aujourd'hui avec plus de 90 % des navigateurs utilisés dans le monde prenant en charge cette fonctionnalité pratique. J'espère que cette discussion sur les bases et la syntaxe vous encouragera à considérer les variables CSS dans vos nouveaux projets, si vous ne l'avez pas déjà fait.

Si votre utilisation des variables CSS a été limitée à certaines couleurs de thème globales, peut-être que ce didacticiel vous incitera à les utiliser davantage et éventuellement à proposer vos propres astuces.

Maintenant que vous en avez terminé avec les variables CSS, consultez certains de nos autres guides :

• Mise en page de la grille CSS
• Introduction à Parcel.js
• Tutoriel sur la boîte flexible CSS
• Webpack pour les débutants
• Tutoriel sur les micro-interactions pour les développeurs débutants

Si vous avez des questions concernant ce didacticiel sur les variables CSS, n'hésitez pas à les soumettre dans les commentaires ci-dessous.

Mise en page et présentation par Chris Fitzgerald et Karol K.