Guide de démarrage rapide des variables CSS (cas d'utilisation, syntaxe et exemples)

J'expérimente avec les variables CSS depuis un certain temps maintenant. Si vous ne les avez pas encore approchés, vous pouvez utiliser ce petit guide pour trouver rapidement votre chemin et vous rendre au travail.

Qu'est ce que c'est

Un exemple d'application simple pour les boutons avec une portée

Les variables CSS vous permettent de définir des valeurs réutilisables en CSS.

Ils sont apparus il y a longtemps. Récemment, ils ont commencé à gagner en popularité grâce à une prise en charge plus large des navigateurs .

Si vous utilisez un préprocesseur, tel que SASS, vous connaissez déjà les variables. Maintenant, vous pouvez faire la même chose sans préprocesseur.

Pourquoi utiliser des variables de style?

Les variables nous permettent d'adhérer au principe de SEC (ne vous répétez pas). Grâce à eux, nous avons également un moyen de créer un point de référence unique pour les valeurs en double. Si vous utilisez un préprocesseur, alors, très probablement, les avantages de cette approche vous sont déjà familiers. Le plus souvent, cela est utilisé pour définir la couleur de base, qui est utilisée pour de nombreux éléments.


Répéter la couleur d'arrière-plan pour plusieurs sélecteurs

Dans l'extrait ci-dessus, la valeur de #e74c3c pourrait et devrait être une variable. Si nous créons une variable à partir de cette valeur, nous obtenons un seul point qui peut être référencé. Cela réduit le risque de bugs et de problèmes de style, car il facilite la maintenance.


Création d'un point de référence à l'aide d'une variable

Dans le deuxième extrait, j'utilise un préprocesseur pour montrer comment vous pouvez utiliser une variable pour la valeur de background-color .

Pourquoi ne pas utiliser des variables de préprocesseur au lieu de variables CSS natives?

Bonne question. Dans la plupart des cas, vous préférerez rester attaché aux variables du préprocesseur. C'est le cas si vous les utilisez déjà. Mais vous pouvez profiter des deux approches à la fois. Cela devient pertinent lorsqu'il devient nécessaire d'utiliser pleinement les capacités des variables CSS natives. Plus d'informations à ce sujet plus tard.

Les variables CSS natives doivent être utilisées lorsque:

1. Vous n'avez pas de préprocesseur ou vous ne l'utilisez pas.
2. Vous souhaitez profiter des variables CSS natives.

Avantages clés des variables CSS natives

À mon avis, les variables CSS natives ont deux gros avantages.

Le premier. Ils sont mis à jour lors de l'exécution! Ils peuvent être contrôlés à l'aide de requêtes multimédias, d'états ou même de JavaScript. Le navigateur appliquera les modifications apportées. Cela ouvre de nombreuses possibilités.

De plus, les variables CSS permettent la portée. Cela signifie que, par exemple, vous pouvez modifier le style ou le comportement d'un élément en mettant à jour la valeur d'une variable. Sinon, vous devez enregistrer de nouveaux styles pour cet élément à partir de zéro. Par conséquent, le volume de CSS à la sortie diminue.

Pas la plus belle syntaxe

Regardons un exemple.



Qu'est-ce qu'un :root pseudo :root ? Tout est logique: c'est un pseudo-sélecteur d'une racine d'arbre. Le sélecteur :root peut être utilisé pour définir des variables globales. Dans ce cas, nous définissons la valeur rebeccapurple pour la variable --primary .



Pour définir une variable, deux tirets sont utilisés comme préfixe.



Pour utiliser une variable, nous avons besoin de la fonction var .

Et que se passe-t-il lorsque nous nous référons à une variable dont la valeur n'est pas définie? Dans ce cas, vous pouvez définir des valeurs de secours ou des valeurs par défaut. La fonction var prend en charge un deuxième paramètre facultatif, correspondant aux valeurs de repli ou aux valeurs par défaut.



Cet extrait définit le style source de la balise de button . Lorsque cela est possible pour la background-color d' background-color , la valeur --btn-color . Si la variable n'existe pas ou si la valeur n'est pas définie, la valeur --primary .

Il n'est pas nécessaire d'utiliser une variable pour notre repli. Vous pouvez prendre la valeur. Mais avec les variables, il sera plus facile d'implémenter le support du code.

Notez qu'aucun style n'est déclaré pour button.btn . Au lieu de cela, la valeur est mise à jour. Maintenant, il convient de passer en cascade et à la portée.

Cascade et étendues

Lorsque vous travaillez avec des variables, la cascade est prise en compte, ainsi que la portée des variables. Dans l'exemple précédent, les variables sont déclarées dans la :root pseudo- :root . Toutes les variables du sélecteur :root ont une portée globale.

Dans un exemple ci-dessus - --primary était disponible pour tous les sélecteurs. En raison de la portée, cette valeur peut être remplacée. Par exemple, nous voulons que la valeur --primary change pour la classe premium .



Dans ce fragment, la valeur de la variable --primary d'un élément de classe premium est dodgerblue . Autrement dit, si aucune classe n'est appliquée au button , la valeur de la variable est rebeccapurple . Cependant, si vous appliquez la classe premium , la couleur change en dodgerblue .

Il convient de noter que, comme pour les styles en ligne, les variables CSS en ligne ont la priorité la plus élevée.



Dans ce fragment, la couleur d'arrière-plan du bouton sera définie sur red , malgré le fait que la classe premium soit utilisée ici. Cela se produit car la valeur --primary décrite directement dans la balise.

Gestion de la valeur

Vous pouvez contrôler les valeurs des variables CSS à l'aide d'autres règles CSS. Les principales approches sont les requêtes multimédias et les changements d'état.

Par exemple, la valeur d'une variable peut changer lorsque la largeur de l'écran dépasse une certaine valeur.



La modification lancera le redessin du navigateur et montrera le résultat à l'utilisateur.

Dans ce cas, le dégradé d'arrière-plan changera si la largeur dépasse 768px .

Comment gérer les variables à l'aide d'états? Par exemple, prenez le button . La variable CSS sera mise à jour en fonction de l'état du button .



Dans ce cas, vous pouvez personnaliser le style du bouton en fonction de l'état :active .

Gérer les valeurs à l'aide de JavaScript

La gestion des variables depuis CSS est très pratique. Mais pour vraiment prendre le contrôle sur eux, vous devez les contrôler en utilisant JavaScript. Heureusement, c'est réel.

La méthode setProperty permet de définir et de gérer des variables de style d'élément.



Comment mettre à jour le jeu de variables dans la :root pseudo- :root ? Bonne question. Vous devrez définir les propriétés du documentElement pour documentElement .



Lorsque vous pouvez manipuler des variables CSS de cette manière, il existe de nombreuses possibilités. Curieux de suivre la position du curseur avec l'événement mousemove .

Utiliser calc () et éliminer les unités

Essayez de ne pas utiliser d'unités dans les variables. Cela facilitera la maintenance ultérieure.



La fonction calc() vous permet de normaliser et de définir des valeurs avec les unités souhaitées.



Les variables CSS peuvent même être utilisées pour stocker des informations sur les unités préférées. Pour plus de clarté, nous avons pris "1px" dans le fragment, mais vous pouvez le remplacer par "1pt", "1rem", etc.

Le manque d'unités est généralement plus pertinent lorsque les valeurs sont définies à partir de JavaScript. Lors du traitement de valeurs pures, notre script résume CSS. La connexion est rompue.



Lorsque les unités sont contenues dans CSS, le service passe également par CSS.

Exemples d'application

J'étudie toujours divers exemples d'utilisation de variables CSS. Tout d'abord, une thématique dynamique me vient à l'esprit. Le suivi du curseur et le défilement de l'écran sont également des applications intéressantes. J'ai préparé du matériel de formation, que vous trouverez ci-dessous.

Exemple avec un chien et une balle

Travaillons ensemble un exemple!



Ici, nous suivons simplement la position du curseur et mettons à jour la position des deux emojis.



L'essentiel ici est de transférer les emojis d'un point central en utilisant translate et en même temps d'appliquer un transition-delay de transition-delay au chien.

Comment mettre à jour la situation? Utilisation de variables pour --y et --y .



Comment faire traîner le chien? transition-delay est appliqué. Un effet de ralentissement complexe peut également être obtenu en utilisant la transition-timing-function .



Il ne reste plus qu'à mettre à jour ces variables pour mousemove .



C’est tout. Quelques améliorations mineures supplémentaires, et quelque chose comme ça se révèle:

Inconvénients

Jusqu'à présent, le travail avec les variables CSS s'est bien passé. J'ai rarement rencontré des situations où quelque chose ne fonctionnait pas. Voici quelques possibilités que j'aimerais voir pour les variables CSS.

1. Animation de variables. Dans cet article, je n'ai pas du tout parlé d'animation. Vous pouvez utiliser des variables pour cela. Mais l'animation des valeurs elles-mêmes ne peut se faire.
2. Les variables CSS ne peuvent pas être utilisées dans les sélecteurs. C'est logique, mais ce serait formidable si un tel niveau d'interpolation était disponible. Utiliser des variables dans le sélecteur nième enfant serait cool.

Conclusion

J'aime travailler avec des variables CSS. Plus je les fais, plus les exemples d'application me viennent à l'esprit.

Grâce à cet article, vous pouvez vous-même commencer à apprendre les variables CSS.

Si vous souhaitez obtenir un aperçu plus détaillé des variables CSS, regardez cette vidéo .

LOOKING.HOUSE - le projet a collecté plus de 150 points de miroir dans 40 pays. Vous pouvez exécuter rapidement les commandes host, ping, traceroute et mtr.