Que sont les propriétés personnalisées CSS (utilisant des tirets doubles) ?

Dévoilement des propriétés CSS Arcane Double-Dash

Dans le domaine du CSS, une syntaxe particulière a émergé, employant des tirets doubles (- -) pour préfixer les noms de propriétés. Cette notation obscure a intrigué de nombreux développeurs, les laissant se gratter la tête pour trouver des réponses.

N'ayez crainte, car ce phénomène énigmatique recèle un profond secret. Ces propriétés mystérieuses, également appelées propriétés personnalisées, sont la clé pour libérer la puissance des variables CSS. En déclarant une propriété personnalisée dans l'élément racine, comme le montre l'exemple de code fourni, vous vous accordez la possibilité de définir et de réutiliser des valeurs dans votre feuille de style.

La norme CSS fournit un guide complet de cette fonctionnalité transformatrice. Selon la page W3C Spec, une propriété personnalisée se compose de deux parties :

1. Déclaration de variable : C'est ici que vous attribuez une valeur à votre propriété personnalisée. Déclaré dans l'élément racine, il devient disponible pour tous les éléments imbriqués.
2. Utilisation de la variable : Pour utiliser la propriété personnalisée définie, il vous suffit de la référencer à l'aide de la fonction var(). Cela vous permet d'appliquer la valeur de la propriété à n'importe quel sélecteur dans votre code CSS.

Par exemple, considérons l'exemple suivant :

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}

Dans ce scénario, la propriété personnalisée - -main-color est défini dans l'élément racine. Cette valeur peut désormais être appliquée à la propriété color du sélecteur #foo h1 à l'aide de var(--main-color).

Les propriétés personnalisées offrent de nombreux avantages, notamment une réutilisabilité améliorée du code, un changement de thème plus facile et encapsulation améliorée. En adoptant cette fonctionnalité puissante, vous pouvez apporter un nouveau niveau d'élégance et d'efficacité à votre développement CSS.

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!