Propriétés personnalisées CSS: nouvelles fa?ons de contr?ler la cascade et l'héritage

Depuis la naissance du CSS en 1994, la cascade et l'héritage ont défini la fa?on dont nous concevons sur les pages Web. Les deux sont des caractéristiques puissantes, mais en tant que développeurs, nous avons un contr?le très limité sur la fa?on dont ils interagissent. La spécificité du sélecteur et l'ordre du code source fournissent un contr?le minimal "hiérarchique", mais manque de nuances - et l'héritage nécessite une lignée ininterrompue . Désormais, les propriétés personnalisées CSS nous permettent de gérer et de contr?ler la cascade et l'héritage de nouvelles fa?ons.

Cet article montrera comment utiliser une propriété personnalisée "pile" pour résoudre certains problèmes courants en cascade: des styles de composants portée à la hiérarchie d'intention plus explicite.

Apprenez rapidement sur les propriétés personnalisées

Le navigateur utilise un préfixe de fournisseur (tel que -webkit- ou -moz-) pour définir de nouvelles propriétés de la même manière, et nous pouvons utiliser le préfixe "vide" - pour définir nos propres propriétés personnalisées. Comme les variables dans SASS ou JavaScript, nous pouvons les utiliser pour nommer, stocker et récupérer des valeurs, mais comme les autres propriétés dans CSS, elles sont en cascade et héritées avec le DOM.

 <code>/* 定義自定義屬性*/ html { --brand-color: rebeccapurple; }</code>

Pour accéder à ces valeurs capturées, nous utilisons la fonction var (). Il a deux parties: d'abord le nom de la propriété personnalisée, puis la valeur de secours lorsque la propriété n'est pas définie:

 <code>button { /* 如果可用，則使用--brand-color，否則回退到deeppink */ background: var(--brand-color, deeppink); }</code>

Ce n'est pas un report de support des navigateurs plus anciens. Si le navigateur ne comprend pas les propriétés personnalisées, elle ignore toute la déclaration var (). Au lieu de cela, il s'agit d'un moyen intégré de gérer les variables non définies, similaires à la pile de polices qui définit une famille de polices de secours lorsque la police n'est pas disponible. Si nous ne fournissons pas de valeurs de secours, la valeur par défaut n'est pas définie.

Créer la variable "pile"

Cette capacité à définir les valeurs de secours est similaire à la "pile de police" utilisée dans la propriété Font-Family. Si la première série n'est pas disponible, la deuxième série sera utilisée, etc. La fonction var () n'accepte qu'une seule valeur de secours, mais nous pouvons nidiquer la fonction var () pour créer un "pile" de secours d'attribut personnalisé de toute taille:

 <code>button { /* 嘗試Consolas，然后是Menlo，然后是Monaco，最后是monospace */ font-family: Consolas, Menlo, Monaco, monospace; /* 嘗試--state，然后是--button-color，然后是--brand-color，最后是deeppink */ background: var(--state, var(--button-color, var(--brand-color, deeppink))); }</code>

Si la syntaxe imbriquée pour les propriétés d'empilement semble volumineuse, vous pouvez utiliser un préprocesseur tel que SASS pour le rendre plus compact.

Une limite de valeur de secours unique est nécessaire pour prendre en charge les valeurs de secours contenant des virgules, comme des piles de polices ou des images d'arrière-plan hiérarchiques:

 <code>html { /* 后備值為"Helvetica, Arial, sans-serif" */ font-family: var(--my-font, Helvetica, Arial, sans-serif); }</code>

Définir "portée"

Le sélecteur CSS nous permet de plonger dans l'arbre HTML DOM et les éléments de style n'importe où sur la page ou les éléments dans un contexte imbriqué spécifique.

 <code>/* 所有鏈接*/ a { color: slateblue; } /* section 內(nèi)的鏈接*/ section a { color: rebeccapurple; } /* article 內(nèi)的鏈接*/ article a { color: deeppink; }</code>

Ceci est utile, mais il ne capture pas la réalité des styles ?modulaires? orientés objet ou axés sur les composants. Nous pouvons avoir de nombreux articles et Adomoteurs imbriqués dans diverses configurations. Nous avons besoin d'un moyen de clarifier quel contexte ou portée devrait prendre priorité lorsqu'ils se chevauchent.

Portée de la proximité

Supposons que nous ayons un thème. Light et un thème .Dark. Nous pouvons utiliser ces classes sur l'élément racine pour définir les valeurs par défaut à l'échelle de la page, mais nous pouvons également les appliquer à des composants spécifiques imbriqués de diverses manières:

Chaque fois que nous appliquons l'une des classes de motifs de couleur, les propriétés d'arrière-plan et de couleur sont réinitialisées puis héritées par les titres et paragraphes imbriqués. Dans notre contexte principal, les couleurs héritent de la classe. Light, tandis que les titres et les paragraphes imbriqués héritent de la classe .Dark. L'héritage est basé sur la lignée directe, de sorte que l'ancêtre le plus proche avec des valeurs définies aura la priorité. Nous l'appelons la proximité .

La proximité est importante pour l'héritage, mais elle n'a aucun effet sur les sélecteurs, qui reposent sur la spécificité. Cela devient un problème si nous voulons coiffer quelque chose dans le récipient intérieur sombre ou clair.

Ici, j'essaie de définir des variantes de bouton clair et sombre. Les boutons en mode lumière doivent être ré-écapurrés avec du texte blanc pour qu'ils se démarquent, tandis que les boutons du mode sombre doivent être des prunes avec du texte noir. Nous sélectionnons directement les boutons en fonction des contextes clairs et sombres, mais cela ne fonctionne pas:

Certains boutons sont dans les deux contextes, avec des ancêtres. Light et .Dark. Dans ce cas, ce que nous voulons, c'est que le sujet récent prenne le relais ( comportement héritant de proximité ), mais ce que nous obtenons, c'est le deuxième sélecteur priant le premier sélecteur (comportement en cascade). étant donné que ces deux sélecteurs ont la même spécificité, l'ordre du code source détermine le gagnant.

Propriétés personnalisées et proximité

Nous avons besoin d'un moyen d' hériter de ces propriétés du sujet, mais de les appliquer uniquement à des éléments enfants spécifiques, tels que nos boutons. Les propriétés personnalisées rendent cela possible! Nous pouvons définir des valeurs sur des conteneurs clairs et sombres, mais utiliser uniquement leurs valeurs héritées sur des éléments imbriqués tels que nos boutons.

Nous allons d'abord définir le bouton pour utiliser les propriétés personnalisées et utiliser les valeurs "par défaut" de secours au cas où ces propriétés ne sont pas définies:

 <code>button { background: var(--btn-color, rebeccapurple); color: var(--btn-contrast, white); }</code>

Maintenant, nous pouvons définir ces valeurs en fonction du contexte, ils se présenteront à l'ancêtre correspondant en fonction de la proximité et de l'héritage:

 <code>.dark { --btn-color: plum; --btn-contrast: black; } .light { --btn-color: rebeccapurple; --btn-contrast: white; }</code>

En tant que bonus supplémentaire, nous utilisons moins de code dans l'ensemble, ainsi qu'une définition de bouton unifiée:

Je pense qu'il s'agit d'une API pour créer des paramètres disponibles pour le composant bouton. Sara Soueidan et Lea Verou ont très bien couvert cela dans les articles récents.

Propriété des composants

Parfois, la proximité n'est pas suffisante pour définir la portée. Lorsque les cadres JavaScript génèrent des "styles de portée", ils établissent la propriété d' éléments d'objets spécifiques. Le composant de disposition des onglets a l'onglet lui-même, mais n'a pas le contenu derrière chaque onglet. C'est aussi ce que la convention BEM essaie de capturer dans des noms de classe complexes.

Nicole Sullivan a inventé le terme ?portée des beignets? en 2011 pour discuter de cette question. Bien que je crois qu'elle ait mis à jour des idées sur ce problème, le problème fondamental n'a pas changé. Les sélecteurs et la spécificité sont idéaux pour décrire comment nous construisons des styles détaillés en plus d'un modèle large, mais ils ne transmettent pas un sentiment de propriété clair.

Nous pouvons utiliser une pile de propriétés personnalisée pour aider à résoudre ce problème. Nous allons d'abord créer des propriétés "globales" sur l'élément, qui sont utilisées pour nos couleurs par défaut:

 <code>html { --background--global: white; --color--global: black; --btn-color--global: rebeccapurple; --btn-contrast--global: white; }</code>

Nous pouvons maintenant l'utiliser partout où nous voulons le référencer. Nous utiliserons la propriété de thème de données pour appliquer nos couleurs de premier plan et d'arrière-plan. Nous voulons que la valeur globale fournisse la valeur de secours par défaut, mais nous voulons également que l'option de l'écraser avec un sujet spécifique. C'est là que la "pile" entre en jeu:

 <code>[data-theme] { /* 如果沒有組件值，則使用全局值*/ background: var(--background--component, var(--background--global)); color: var(--color--component, var(--color--global)); }</code>

Maintenant, nous pouvons définir le composant inverse en définissant la propriété * - composante à l'inverse de la propriété globale:

 <code>[data-theme='invert'] { --background--component: var(--color--global); --color--component: var(--background--global); }</code>

Mais nous ne voulons pas que ces paramètres héritent du beignet de propriété, nous réinitialisons donc ces valeurs à initiale (non définie) sur chaque sujet. Nous devons le faire dans une spécificité inférieure ou un ordre de code source antérieur afin qu'il fournit des valeurs par défaut que chaque sujet peut remplacer:

 <code>[data-theme] { --background--component: initial; --color--component: initial; }</code>

Le mot-clé initial a une signification particulière lorsqu'il est utilisé pour les propriétés personnalisées, en le rendant à l'état invalide garanti. Cela signifie qu'il ne sera pas transmis pour définir l'arrière-plan: initial ou couleur: initiale, la propriété personnalisée ne sera pas définie, et nous retomberons à la valeur suivante de la pile, c'est-à-dire les paramètres globaux.

Nous pouvons faire de même avec le bouton, puis nous assurer que le thème des données est appliqué à chaque composant. Si aucun sujet spécifique n'est donné, chaque composant sera par défaut au sujet global:

Définir "source"

Une cascade CSS est une série de couches de filtrage utilisées pour déterminer quelle valeur doit être préférée lors de la définition de plusieurs valeurs sur la même propriété. Nous interagissons le plus souvent avec des couches spécifiques ou une hiérarchie finale basée sur la séquence de code source - mais la première couche de la cascade est la "source" du style. La source décrit la source du style - généralement le navigateur (par défaut), l'utilisateur (préférence) ou l'auteur (US).

Par défaut, le style d'auteur remplace les préférences des utilisateurs et les préférences de l'utilisateur remplacer les paramètres du navigateur. Cela change lorsque quelqu'un s'applique !important à un style, et la source est inversée: le navigateur !important a la source la plus élevée, puis les préférences des utilisateurs importantes, puis notre auteur Styles importants, surtout les couches normales. Il existe d'autres sources, mais nous n'entrerons pas dans les détails ici.

Lorsque nous créons une "pile" de propriété personnalisée, nous construisons un comportement très similaire. Si nous voulons représenter une source existante en tant que pile de propriétés personnalisée, cela ressemblera à ceci:

 <code>.origins-as-custom-properties { color: var(--browser-important, var(--user-important, var(--author-important, var(--author, var(--user, var(--browser)))))); }</code>

Ces couches existent déjà, il n'y a donc aucune raison de les recréer. Mais lorsque nous superposons nos styles "globaux" et "composants" ci-dessus, nous faisons quelque chose de similaire - créant une couche source "composante" qui écrase notre couche "globale". La même méthode peut être utilisée pour résoudre divers problèmes hiérarchiques dans CSS, qui ne peuvent pas toujours être décrits avec spécificité:

• Override ?Composants? Thème ?Valeurs par défaut
• Sujet ?Concevoir un système ou un cadre
• Statut ?Type? Valeur par défaut

Jetons un coup d'?il à d'autres boutons. Nous avons besoin d'un style de bouton par défaut, d'un état désactivé et de divers "types" tels que le danger, le primaire et le secondaire. Nous voulons que l'état désactivé remplace toujours la variante de type, mais le sélecteur ne peut pas capturer cette différence:

Mais nous pouvons définir une pile qui fournit les couches "type" et "état" dans l'ordre que nous voulons prioriser:

 <code>button { background: var(--btn-state, var(--btn-type, var(--btn-default))); }</code>

Maintenant, lorsque nous définissons deux variables, l'état aura toujours priorité:

J'ai créé un cadre de couleur en cascade en utilisant cette technique qui permet des paramètres de thème personnalisés en fonction de la superposition:

• Propriétés du sujet prédéfini en HTML
• Préférences de couleur utilisateur
• Modes clairs et sombres
• Par défaut du thème global

Mélanger et assortir

Ces méthodes peuvent être à l'extrême, mais la plupart des cas d'utilisation quotidiens peuvent être traités en utilisant deux ou trois valeurs dans la pile, généralement en utilisant les techniques ci-dessus:

• Définir la pile variable de la couche
• L'héritage les définit en fonction de la proximité et de la portée
• Appliquer soigneusement les valeurs initiales pour éliminer les éléments imbriqués de la portée

Nous utilisons ces propriétés personnalisées "pile" dans nos projets Oddbird. Nous explorons toujours, mais ils nous ont aidés à résoudre des problèmes difficiles à résoudre avec des sélecteurs et une spécificité. Avec des propriétés personnalisées, nous n'avons pas à combattre la cascade ou l'héritage. Nous pouvons les capturer et les utiliser comme prévu et avoir un meilleur contr?le sur la fa?on dont ils sont appliqués dans chaque cas. Pour moi, il s'agit d'une énorme victoire pour CSS - en particulier lors du développement de cadres, d'outils et de systèmes de style.

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!