Share
Les variables existent invariablement dans tous les langages de programmation, car elles sont très utiles. Il vous suffit de stocker une valeur dans une variable une fois, puis de l'utiliser ultérieurement plusieurs fois, en évitant les répétitions. Bien que CSS ne soit pas un langage de programmation, le manque de variables limite encore ses capacités.
Maintenant que les variables CSS natives existent, j'aimerais expliquer en quoi elles sont différentes des variables fournies par les préprocesseurs CSS et comment les utiliser correctement..
La syntaxe d'utilisation des propriétés personnalisées est un peu verbeuse, et certains développeurs pourraient la considérer moche. Un autre facteur qui décourage l'utilisation de variables natives est le support existant fourni par les variables Sass..
Bien que les préprocesseurs comme Sass prennent en charge les variables, ils ont toujours certaines limitations que je vais aborder dans cette section..
Vous ne pouvez pas mettre à jour les variables du préprocesseur en fonction des requêtes de support. Pour qu'un site soit réactif, vous devez modifier les valeurs en fonction des dimensions de l'écran. Les variables de préprocesseur ne peuvent pas faire cela. Par exemple, considérons le code suivant:
$ article-margin: 1em 0.5em; @media (min-width: 1024px) $ article-margin: 2em 1em; .my-article margin: $ article-margin;
Il va compiler pour:
.my-article margin: 1em 0.5em;
Comme vous pouvez le constater, l’affectation dans la requête multimédia est complètement ignorée. D'autre part, les variables CSS respecteront cette affectation dans une requête multimédia..
De même, les variables du préprocesseur ne sont ni en cascade ni héritées. En utilisant des variables natives, vous pouvez supprimer toutes ces limitations. Un autre avantage important de l’utilisation des variables natives est leur interopérabilité. Contrairement aux variables Sass, qui fonctionnent uniquement avec Sass, les variables natives fonctionnent non seulement avec tous les pré-processeurs, mais également dans les fichiers CSS simples..
Pour comprendre comment utiliser les propriétés personnalisées CSS, commençons par un exemple de base:
: root --text-color: crimson; .my-section color: var (- couleur du texte, noir);
Chaque fois que vous définissez une propriété personnalisée, vous commencez par définir son étendue. L'étendue détermine les noeuds DOM auxquels la propriété personnalisée peut être disponible. En utilisant :racine implique que la propriété custom est disponible pour tous les éléments. Gardez à l'esprit que toutes les propriétés personnalisées doivent commencer par deux tirets..
Si vous souhaitez utiliser une propriété personnalisée, vous devrez la référencer avec le var () une fonction. Cette fonction prend deux arguments. le premier est la propriété personnalisée elle-même et le second est une valeur de repli. La valeur de secours est utilisée lorsqu'une propriété personnalisée n'est déclarée sur aucun des ancêtres ou si sa valeur est invalide..
Notez que les propriétés personnalisées sont sensibles à la casse. Cela implique que --couleur du texte , --Couleur du texte, et --couleur du texte sont tous différents.
Il y a quelques autres choses à garder à l’esprit lorsque vous utilisez var ().
La première est que les valeurs de repli peuvent être séparées par des virgules, et dans le cas de valeurs abrégées telles que la marge, vous ne devez pas séparer les valeurs individuelles par une virgule. Par exemple, var (- para-font-family, "Lato", "Roboto"); définit la valeur de repli comme "Lato" "Roboto";. De même, une solution de secours pour la propriété border ressemblera à ceci:
un border: var (- lien-frontière, 1px en pointillé marron);
La seconde est que vous ne pouvez pas utiliser de variables en tant que noms de propriétés. Le code suivant lève une erreur sur la seconde déclaration.
h1 --my-size: taille de la police; var (- ma-taille): 2em;
Une fois les bases abordées, voyons comment construire des valeurs à partir de propriétés personnalisées. Si vous avez affecté un nombre nu à une variable, vous ne pourrez pas l'ajouter directement à une unité pour obtenir une valeur valide. En bref, le code ci-dessous est invalide:
.quote --t-padding: 20; padding-top: var (- t-padding) px; // ne fonctionnera pas
Vous devrez utiliser le calc () fonction pour effectuer quelques calculs et construire des valeurs CSS finales. Pour que le code ci-dessus fonctionne, vous devrez le modifier comme suit:
.quote --t-padding: 20; padding-top: calc (var (- t-padding) * 1px); // Marchera
Vous n'êtes pas limité à juste px unités. Vous pouvez utiliser toutes les unités valides disponibles en CSS..
Les variables CSS natives peuvent également interagir avec JavaScript. Pour obtenir leurs valeurs, vous pouvez utiliser le code suivant:
Accentsconagua
var styles = getComputedStyle (document.documentElement); var bgValue = String (styles.getPropertyValue ('- background')). trim ();le réduire() va supprimer les espaces aux deux extrémités de votre valeur.
Si vous souhaitez définir la valeur d'une propriété personnalisée, vous devrez utiliser le setProperty () méthode.
document.documentElement.style.setProperty ('- background', 'black');le --Contexte la variable est maintenant noire. Vous pouvez également définir une propriété personnalisée pour faire référence à une autre à l'aide de la commande var () une fonction.
document.documentElement.style.setProperty ('- h-color', 'var (- p-color)');La déclaration ci-dessus est complètement valide et définit la valeur de --couleur h égal à --couleur p.
Les variables peuvent offrir beaucoup de flexibilité pour changer de thème en fonction des préférences de l'utilisateur. Auparavant, vous deviez utiliser un style en ligne ou créer plusieurs feuilles de style. Ces deux méthodes ont leurs propres démérites. La création de plusieurs feuilles de style est un casse-tête, et l'utilisation d'un style en ligne est une mauvaise pratique. Les variables peuvent fournir une solution de facilité dans cette situation. Voici quelques scripts JavaScript de base pour changer de thème de manière dynamique:
document.getElementById ("greenish"). addEventListener ("click", greenTheme); fonction greenTheme () var greenShades = document.documentElement.style; greenShades.setProperty ('- theme-font', 'Dosis'); greenShades.setProperty ('- entête-fond', 'hsl (90, 70%, 60%)'); // Définir plus de telles valeurs Le code ci-dessus attache un événement de clic à notre bouton de thème. Dès que quelqu'un clique dessus, la fonction greenTheme () définit les valeurs de quelques variables pour modifier l’aspect général du site Web. Comme vous pouvez le constater, cette méthode était beaucoup plus simple à mettre en œuvre que les deux autres solutions..
Vous pouvez essayer d'ajouter quelques variables ou créer plus de thèmes dans cette démonstration de CodePen.
Le tutoriel peut sembler suggérer que les variables CSS natives sont supérieures aux variables de préprocesseurs tels que Sass, mais je ne nie en rien l'utilité des préprocesseurs. L'utilisation de divers préprocesseurs CSS augmente la productivité. Ils ont beaucoup plus à offrir que de simples variables. De nombreuses fonctions intégrées, boucles et instructions conditionnelles peuvent faire avancer les choses rapidement.
Ce tutoriel indique simplement que même si les variables natives ont une syntaxe étrange, elles ont encore beaucoup à offrir et valent la peine d’être utilisées dans vos projets. Si vous avez des questions concernant ce tutoriel, faites-le moi savoir dans les commentaires..
