Les variables CSS (officiellement appelées propriétés personnalisées) sont des valeurs définies par l'utilisateur qui peuvent être définies une fois et utilisées plusieurs fois dans votre base de code. Ils facilitent la gestion des couleurs, des polices, de la taille et des valeurs d'animation et assurent la cohérence entre les applications Web.
Par exemple, vous pouvez définir une couleur de marque en tant que propriété CSS (--priMaryColor: # 7232FA) et utiliser cette valeur dans tous les composants ou style qui utilisent la couleur de votre marque (arrière-plan: var (- primaireColor);).
En plus d'offrir un code plus propre et non apétitif, les variables CSS peuvent être utilisées pour créer des palettes de couleurs, améliorer la réactivité et créer des systèmes de type dynamique.
Ce message est extrait de mon guide, CSS Master, qui vous apprend à écrire CSS mieux et plus efficace. Vous apprendrez également à maîtriser les outils qui amélioreront votre flux de travail et créeront de meilleures applications.
Introduction aux propriétés personnalisées CSS: les variables CSS ou les propriétés personnalisées, permettent aux développeurs de définir des valeurs une fois et de les réutiliser tout au long de la feuille de style. Cela améliore la maintenabilité et la cohérence du code entre les applications Web en simplifiant la gestion des couleurs, des polices, des tailles et des valeurs d'animation. Les propriétés personnalisées peuvent être appliquées largement à travers le projet, permettant des mises à jour dynamiques et des ajustements thématiques avec un minimum d'effort.
Avantages et applications des variables CSS: Au-delà du nettoyage du code en réduisant la répétition, les variables CSS déverrouillent le potentiel de création de thèmes dynamiques, de conceptions réactives et d'échelles de type systématique. Ils contribuent à gérer des palettes et des dispositions de couleurs complexes, facilitant des ajustements plus faciles aux éléments de conception en fonction de l'interaction utilisateur ou des conditions environnementales, telles que la commutation entre les modes clairs et sombres.
Implémentation pratique et fonctionnalité étendue: à travers des exemples, l'article illustre comment définir, utiliser et manipuler les propriétés personnalisées CSS à diverses fins, notamment le thème et la réactivité. Il met en évidence la polyvalence des variables CSS en conjonction avec les requêtes multimédias et JavaScript, présentant leur potentiel pour rationaliser considérablement les stratégies de style, en particulier dans des cadres basés sur des composants comme React, Angular et Vue. Cette approche encourage une façon modulaire, maintenable et évolutive de créer des interfaces Web.
Pour définir une propriété personnalisée, sélectionnez un nom et préfixez-le avec deux tirets. Tout caractère alphanumérique peut faire partie du nom. Les caractères de trait d'union (-) et de soulignement (_) sont également autorisés. Une large gamme de caractères Unicode peut faire partie d'un nom de propriété personnalisé. Cela inclut les emoji, mais pour la clarté et la lisibilité, respectez les noms alphanumériques.
Voici un exemple:
<span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>
le - indique à l'analyseur CSS qu'il s'agit d'une propriété personnalisée. Lorsqu'il est utilisé comme variable, le moteur d'analyse remplace la propriété par sa valeur.
Les noms de propriétés personnalisés sont sensible à la casse . Cela signifie que - primaryColor et - primaryColor sont considérés comme deux noms de propriété distincts. C'est un écart par rapport au CSS traditionnel, dans lequel les biens et les cas de valeur n'ont pas d'importance. Il est cependant conforme aux règles des noms de variables dans ECMascript.
Comme avec d'autres propriétés, telles que l'affichage ou la police, les propriétés personnalisées CSS doivent être définies dans un bloc de déclaration. Un modèle commun est de définir les propriétés personnalisées en utilisant: le pseudo-élément racine comme sélecteur:
<span><span>:root</span> {
</span> <span>--primarycolor: #0ad0f9ff;
</span><span>}</span>: La racine est un pseudo-élément qui fait référence à l'élément racine du document. Pour les documents HTML, c'est l'élément . Pour les documents SVG, c'est l'élément
Pour utiliser une propriété personnalisée comme variable, nous devons utiliser la fonction var (). Par exemple, si nous voulions utiliser notre propriété personnalisée - primaryColor comme couleur d'arrière-plan, nous ferons ce qui suit:
<span>body {
</span> <span>background-color: var(--primarycolor);
</span><span>}</span>La valeur de notre propriété personnalisée deviendra la valeur calculée de la propriété de couleur arrière.
À ce jour, les propriétés personnalisées ne peuvent être utilisées que comme variables pour définir des valeurs pour les propriétés CSS standard. Vous ne pouvez pas, par exemple, stocker une propriété nom en tant que variable, puis la réutiliser. Le CSS suivant ne fonctionnera pas:
<span><span>:root</span> {
</span> <span>--top-border: border-top; /* Can't set a property as custom property's value */
</span> <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
</span><span>}</span>Vous ne pouvez pas non plus stocker une propriété-valeur paire en tant que variable et la réutiliser. L'exemple suivant est également invalide:
<span><span>:root</span> {
</span> <span>--text-color: 'color: orange'; /* Invalid property value */
</span><span>}
</span><span>body {
</span> <span>var(--text-color); /* Invalid use of a property */
</span><span>}</span>Enfin, vous ne pouvez pas concaténer une variable dans le cadre d'une chaîne de valeur:
<span><span>:root</span> {
</span> <span>--base-font-size: 10;
</span><span>}
</span><span>body {
</span> <span>font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
</span><span>}</span>«Propriété personnalisée» est un nom à l'épreuve du futur qui explique la façon dont cette fonctionnalité pourrait être utilisée un jour. Cela pourrait changer, cependant, si la spécification des extensions CSS était implémentée par les fournisseurs de navigateur. Cette spécification définit les moyens d'étendre le CSS avec des combinaisons de sélecteur personnalisées, des fonctions et des rubriques.
Nous appelons généralement les propriétés personnalisées «variables», et à ce jour, c'est la seule façon de les utiliser. En théorie, ils ne sont pas entièrement interchangeables. En pratique et pour l'instant, ils le sont. J'utiliserai principalement Propriétés personnalisées dans ce post, car c'est leur nom propre. J'utiliserai variables quand il rend la phrase plus claire.
La fonction var () accepte jusqu'à deux arguments. Le premier argument doit être un nom de propriété personnalisé. Le deuxième argument est facultatif, mais doit être une valeur de déclaration. Cette valeur de déclaration fonctionne comme une valeur de secours ou par défaut appliquée lorsque la valeur de propriété personnalisée n'est pas définie.
Prenons le CSS suivant:
<span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>
si - accent-couleur est défini - dit que sa valeur est # f30 - alors la couleur de remplissage pour tout chemin avec un attribut .btn__Call-to-action aura un remplissage rouge-orange. S'il n'est pas défini, le remplissage sera un bleu ciel profond.
Les valeurs de déclaration peuvent également être imbriquées. En d'autres termes, vous pouvez utiliser une variable comme valeur de secours pour la fonction VAR:
<span><span>:root</span> {
</span> <span>--primarycolor: #0ad0f9ff;
</span><span>}</span>Dans le CSS ci-dessus, si —Books-Bg est défini, la couleur d'arrière-plan sera définie sur la valeur de la propriété —Books-BG. Sinon, la couleur d'arrière-plan sera plutôt la valeur attribuée à --Arts-bg. Si aucun de ceux-ci n'est défini, la couleur d'arrière-plan sera la valeur initiale de la propriété - dans ce cas, transparent.
quelque chose de similaire se produit lorsqu'une propriété personnalisée a une valeur invalide pour la propriété avec laquelle il est utilisé. Considérez le CSS suivant:
<span>body {
</span> <span>background-color: var(--primarycolor);
</span><span>}</span>Dans ce cas, la valeur de la propriété --footer-link-hover n'est pas une couleur valide. Au lieu de cela, le pied de page A: Hover hérite de sa couleur de celle de l'élément
.Les propriétés personnalisées sont résolues de la même manière que d'autres valeurs CSS sont résolues. Si la valeur n'est pas valide ou non définie, l'analyseur CSS utilisera la valeur héritée si la propriété est héritable (telle que la couleur ou la police), et la valeur initiale si ce n'est pas le cas (comme avec la couleur arrière).
Les propriétés personnalisées adhèrent également aux règles de la cascade. Leurs valeurs peuvent être remplacées par des règles suivantes:
<span><span>:root</span> {
</span> <span>--top-border: border-top; /* Can't set a property as custom property's value */
</span> <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
</span><span>}</span>Dans l'exemple ci-dessus, notre texte corporel serait gris foncé. Nous pouvons également réinitialiser les valeurs par sélectionneur. Ajoutons quelques règles supplémentaires à ce CSS:
<span><span>:root</span> {
</span> <span>--text-color: 'color: orange'; /* Invalid property value */
</span><span>}
</span><span>body {
</span> <span>var(--text-color); /* Invalid use of a property */
</span><span>}</span>Dans ce cas, tout texte enveloppé dans des balises d'élément
serait orange. Mais le texte dans
Vous pouvez également définir la valeur d'une propriété personnalisée en utilisant l'attribut de style - par exemple, style = "- marque-couleur: # 9A09AF".
Les propriétés personnalisées fonctionnent particulièrement bien pour gérer les palettes de couleurs HSL. HSL signifie teinte, saturation, légèreté . Il s'agit d'un modèle de couleur basé sur la lumière similaire à RVB. Nous pouvons utiliser les valeurs HSL dans CSS grâce aux fonctions de couleur HSL () et HSLA (). La fonction HSL () accepte trois arguments: teinte, saturation et légèreté. La fonction hlsa () accepte également un quatrième argument, indiquant la transparence alpha de la couleur (une valeur comprise entre 0 et 1).
Alors qu'un système RVB exprime la couleur sous forme de proportions de rouge, vert et bleu, HSL utilise un cercle de couleurs où la teinte est une position de degré sur ce cercle, et le ton ou l'ombre est défini en utilisant les valeurs de saturation et de légèreté. La saturation peut varier de 0% à 100%, où 0% est gris et 100% est la couleur complète. La légèreté peut également varier de 0% à 100%, où 0% est noir, 100% est blanc et 50% est la couleur normale.
Roue chromatique par Crazyterabyte d'OpenClipart.
Dans le système de couleur HSL, les couleurs primaires rouges, vertes et bleues sont situées à 120 degrés séparées à 0 degrés / 360 degrés, 120 degrés et 240 degrés. Les couleurs secondaires - le cycle, le magenta et le jaune - sont également à 120 degrés, mais assis en face des couleurs primaires, à 180 degrés, 300 degrés et 60 degrés / 420 degrés respectivement. Les couleurs tertiaires, quaternaires et autres se situent entre les deux à environ dix degrés. Le bleu, écrit en utilisant la notation HSL, serait HSL (240, 100%, 50%).
Lorsque vous utilisez une valeur sans unité pour le premier argument des fonctions HSL () et HSLA (), les navigateurs supposent que c'est un angle dans les unités de degré. Vous pouvez cependant utiliser n'importe quelle unité d'angle CSS prise en charge. Le bleu peut également être exprimé en HSL (240 degrés, 100%, 50%), HSL (4,188rad, 100%, 50%) ou HSLA (0,66 leur, 100% 50%).
Voici où ça devient amusant. Nous pouvons définir nos valeurs de teinte à l'aide d'une propriété personnalisée et définir des nuances plus légères et plus sombres en ajustant la valeur de saturation et de la légèreté:
<span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>
Le CSS ci-dessus nous donne la palette illustrée ci-dessous.
Il s'agit d'une version simple, mais vous pouvez également utiliser des propriétés personnalisées pour ajuster les valeurs de saturation et de légèreté.
Dieter Raber discute d'une technique de génération de palettes robuste dans «Création de thèmes de couleurs avec des propriétés personnalisées, HSL et un peu calc ()».
Une autre idée est de combiner les propriétés personnalisées et la fonction calc () pour générer un schéma de couleurs carré à partir d'une teinte de base. Créons un jeu de couleurs carré dans notre prochain exemple. Un schéma de couleurs carré se compose de quatre couleurs équidistantes les unes des autres sur la roue chromatique, c'est-à-dire à 90 degrés d'intervalle:
<span><span>:root</span> {
</span> <span>--primarycolor: #0ad0f9ff;
</span><span>}</span>Ce bit de CSS nous donne le jeu de couleurs inspiré plutôt tropical illustré ci-dessous.
Les propriétés personnalisées fonctionnent également bien avec les requêtes multimédias, comme nous le verrons dans une section ultérieure.
Vous pouvez utiliser les propriétés personnalisées CSS pour définir des ensembles de variables pour les thèmes sombres et clairs de votre site.
Prenez l'exemple ci-dessous des styles d'une page, nous pouvons remplacer toutes les couleurs HSL dans différents sélecteurs par des variables après avoir défini des propriétés personnalisées pour les couleurs correspondantes dans: root:
<span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>
Des noms appropriés pour les propriétés personnalisés ont été utilisés. Par exemple, --nav-bg-Color fait référence à la couleur de l'arrière-plan NAV , tandis que --nav-text-coulor fait référence à la couleur de Nav Foreground / Text .
Dupliquez maintenant le: Sélecteur de racine avec son contenu, mais ajoutez un attribut de thème avec une valeur sombre :
<span><span>:root</span> {
</span> <span>--primarycolor: #0ad0f9ff;
</span><span>}</span>Ce thème sera activé si un attribut thème avec une valeur sombre est ajouté à l'élément .
Nous pouvons maintenant jouer avec les valeurs de ces variables manuellement, en réduisant la valeur légère des couleurs HSL pour fournir un thème sombre, ou nous pouvons utiliser d'autres techniques telles que les filtres CSS comme Invert () et la luminosité (), qui sont couramment utilisés pour ajuster le rendu des images mais peuvent également être utilisés avec tout autre élément.
Ajouter le code suivant à: root [theme = 'dark']:
<span>body {
</span> <span>background-color: var(--primarycolor);
</span><span>}</span>Le filtre invert () inverse toutes les couleurs des éléments sélectionnés (chaque élément dans ce cas). La valeur de l'inversion peut être spécifiée en pourcentage ou en nombre. Une valeur de 100% ou 1 inversera complètement la teinte, la saturation et les valeurs de légèreté de l'élément.
Le filtre de luminosité () rend un élément plus brillant ou plus sombre. Une valeur de 0 se traduit par un élément complètement sombre.
Le filtre invert () rend certains éléments très brillants. Ceux-ci sont atténués en réglant la luminosité (0,6).
un thème sombre avec différents degrés d'obscurité:
utilisons maintenant JavaScript pour basculer entre les thèmes sombres et clairs lorsqu'un utilisateur clique sur le bouton Dark / Light . Dans votre HTML, ajoutez un
<span><span>:root</span> {
</span> <span>--top-border: border-top; /* Can't set a property as custom property's value */
</span> <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
</span><span>}</span>Document.DocumentElement fait référence à l'élément Root Dom du document - c'est-à-dire . Ce code vérifie l'existence d'un attribut thème à l'aide de la méthode .hasattribute () et ajoute l'attribut avec une valeur sombre s'il n'existe pas, provoquant le commutateur à l'obscurité thème. Sinon, il supprime l'attribut, ce qui se traduit par le passage au thème léger.
Remarque: vous devez également l'utiliser en combinaison avec la fonctionnalité préfabriquée-color dans CSS, qui peut être utilisée pour modifier automatiquement les thèmes légers / sombres du paramètre de système d'exploitation ou d'agent utilisateur (navigateur) d'un utilisateur. Ceci est illustré dans la section suivante.
Nous pouvons également utiliser des propriétés personnalisées avec des requêtes multimédias. Par exemple, vous pouvez utiliser des propriétés personnalisées pour définir des schémas de couleurs claires et sombres:
<span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>
De même, nous pouvons utiliser des propriétés personnalisées pour modifier la taille de la police de base pour l'écran par rapport à l'impression:
<span><span>:root</span> {
</span> <span>--primarycolor: #0ad0f9ff;
</span><span>}</span>Dans ce cas, nous utilisons des unités adaptées aux médias pour l'impression et l'écran. Pour les deux supports, nous utiliserons une taille de police de base de 10 unités - Pixels pour écran, points pour imprimer. Nous utiliserons également la valeur de --bas-Font-Size: Pour définir une taille de départ pour notre élément racine (HTML). Nous pouvons ensuite utiliser des unités REM pour dimensionner notre typographie par rapport à la taille de la police de base.
Rappelez-vous: les propriétés personnalisées sont des propriétés CSS, et nous pouvons interagir avec eux en tant que tels. Par exemple, nous pouvons utiliser l'API CSS.Supports () pour tester si un navigateur prend en charge les propriétés personnalisées:
<span>body {
</span> <span>background-color: var(--primarycolor);
</span><span>}</span>Nous pouvons également utiliser la méthode setProperty () pour définir une valeur de propriété personnalisée:
<span><span>:root</span> {
</span> <span>--top-border: border-top; /* Can't set a property as custom property's value */
</span> <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
</span><span>}</span>L'utilisation de SupporProperty () fonctionne de manière similaire. Passez simplement le nom de la propriété personnalisée comme argument:
<span><span>:root</span> {
</span> <span>--text-color: 'color: orange'; /* Invalid property value */
</span><span>}
</span><span>body {
</span> <span>var(--text-color); /* Invalid use of a property */
</span><span>}</span>Pour utiliser la propriété personnalisée comme valeur avec JavaScript, utilisez la fonction var () avec le nom de la propriété comme argument:
<span><span>:root</span> {
</span> <span>--base-font-size: 10;
</span><span>}
</span><span>body {
</span> <span>font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
</span><span>}</span>Hélas, vous ne pouvez pas définir des propriétés personnalisées à l'aide de la syntaxe de la cracket carré ou des propriétés camel de l'objet de style. En d'autres termes, ni document.body.style .-- bg-home ni document.body.style ['- bg-home'] fonctionnera.
Les cadres JavaScript comme React, Angular et Vue permettent aux développeurs utiliser JavaScript pour créer des blocs réutilisables et partageables de HTML, souvent avec CSS défini au niveau des composants.
Voici un exemple de composant React, écrit en JSX, une extension de syntaxe pour JavaScript:
<span><span>.btn__call-to-action</span> {
</span> <span>background: var(--accent-color, deepskyblue);
</span><span>}</span>SitePoint propose des ressources étendues sur React, Angular et Vue si vous souhaitez en savoir plus sur le travail avec des frameworks JavaScript. Pour React, consultez votre première semaine avec React et des articles réagiss. Pour Angular, il y a Apprenez Angular: votre première semaine et beaucoup d'articles et de tutoriels angulaires. Pour Vue, consultez Jump start Vue.js et plus d'articles Vue.
Notre composant React importe CSS dans un fichier JavaScript. Lorsqu'il est compilé, le contenu de Field-Button.css est chargé en ligne. Voici une façon possible de l'utiliser avec des propriétés personnalisées:
<span>body {
</span> <span>background-color: var(--books-bg, var(--arts-bg));
</span><span>}</span>Dans cet exemple, nous avons utilisé une propriété personnalisée - - Button-Bg-Color - pour la couleur d'arrière-plan du bouton, ainsi qu'une couleur par défaut au cas où - Button-Bg-Color ne se définit jamais. À partir de là, nous pouvons définir une valeur de - Button-Bg-Color, soit dans une feuille de style globale, soit localement via l'attribut de style.
Définissons la valeur en tant que «prop» réagi. React accessoires (abréviation pour Propriétés ) Attributs d'élément imimique. Ils sont un moyen de transmettre des données dans un composant React. Dans ce cas, nous ajouterons un accessoire nommé ButtonBGColor:
<span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>
Maintenant, nous devons mettre à jour notre champ de terrain pour soutenir ce changement:
<span><span>:root</span> {
</span> <span>--primarycolor: #0ad0f9ff;
</span><span>}</span>Dans le code ci-dessus, nous avons ajouté un objet Buttonstyle qui contient le nom de notre propriété personnalisée et définit sa valeur à celle de notre accessoire ButtonBgColor, et un attribut de style à notre bouton.
L'utilisation de l'attribut de style est probablement à l'encontre de tout ce qu'on vous a enseigné sur l'écriture de CSS. Un argument de vente de CSS est que nous pouvons définir un ensemble de styles à utiliser sur plusieurs documents HTML et XML. L'attribut de style, en revanche, limite la portée de ce CSS à l'élément à laquelle il est appliqué. Nous ne pouvons pas le réutiliser. Et nous ne pouvons pas profiter de la cascade.
Mais dans une architecture frontale basée sur des composants, un composant peut être utilisé dans plusieurs contextes, par plusieurs équipes, ou peut même être partagé entre les projets clients. Dans ces cas, vous voudrez peut-être combiner la «portée mondiale» de la cascade avec la «portée locale» étroite fournie par l'attribut de style.
Définition de la valeur de propriété personnalisée avec l'attribut de style limite l'effet à Cette instance particulière du composant FieldButTongroup. Mais parce que nous avons utilisé une propriété personnalisée au lieu d'une propriété CSS standard, nous avons toujours la possibilité de définir - Button-Bg-Color dans une feuille de style liée au lieu d'une prop.
Conclusion
J'espère que vous comprenez maintenant mieux comment utiliser des variables ou des propriétés personnalisées dans CSS. Consultez mon livre, CSS Master, pour étendre vos connaissances CSS et obtenir des conseils plus utiles comme ceux-ci.
FAQ sur les propriétés personnalisées CSS
Comment déclarer une propriété personnalisée CSS?
pour déclarer une propriété personnalisée CSS, utilisez le préfixe suivi d'un nom, comme --maain-couleur. Vous lui attribuez une valeur en utilisant la fonction var (), telle que var (- main-couleur: # 3498db).Quel est l'avantage d'utiliser les propriétés personnalisées CSS?
Les propriétés personnalisées CSS offrent une façon plus flexible et maintenable de gérer les styles. Ils permettent un thème facile, des mises à jour rapides et une centralisation des valeurs, la promotion du nettoyage et du code plus modulaire.Les propriétés personnalisées CSS peuvent-elles être utilisées pour plus que de simples couleurs?
Oui, les propriétés personnalisées CSS peuvent être utilisées pour différents types de valeurs, y compris les couleurs, les tailles de police, l'espacement, etc. Ils fournissent un moyen de paramétrer toute valeur dans vos feuilles de style.
Les propriétés personnalisées CSS sont-elles héritées?Oui, les propriétés personnalisées CSS suivent les règles d'héritage standard. Si une propriété n'est pas définie sur un élément, elle héritera de la valeur de son parent. Cela les rend puissants pour créer des systèmes de conception cohérents.
Les propriétés personnalisées CSS peuvent-elles être utilisées dans les requêtes multimédias?Oui, les propriétés personnalisées CSS peuvent être utilisées dans les requêtes multimédias. Cela permet une réactivité plus dynamique en ajustant les valeurs des propriétés en fonction de la taille de l'écran ou d'autres fonctionnalités médiatiques.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Solution à javascript :;
Qu'est-ce que la résolution 2K ?
Analyse coût-efficacité de l'apprentissage de Python et C++
expression régulière Perl
Type de commande de redémarrage Linux
COMMENT INSTALLER LINUX
Classement des dix principales plateformes de trading formelles
Quels sont les logiciels de programmation du microcontrôleur ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
