Que sont les propriétés personnalisées CSS (avec doubles tirets) et comment fonctionnent-elles ?

Exploration des propriétés personnalisées CSS avec des doubles tirets

Dans le domaine du CSS, une syntaxe de code déroutante est apparue. Le code CSS avec des propriétés préfixées par des doubles tirets a laissé beaucoup de gens perplexes. Cet article vise à percer le mystère derrière ces propriétés uniques et à approfondir leur signification en CSS.

Comprendre les propriétés personnalisées

Le double tiret (--) préfixé à CSS propriétés désigne des propriétés personnalisées. Introduites dans CSS3, ces propriétés permettent aux développeurs de définir leurs propres variables réutilisables dans une feuille de style ou sur l'ensemble d'un site Web. Ils offrent une flexibilité et une maintenabilité améliorées du code.

Spécification du W3C :

La spécification officielle du W3C pour les propriétés personnalisées définit la syntaxe comme --[custom-property-name]. Les propriétés personnalisées doivent commencer par deux tirets et être suivies d'un nom de propriété valide.

Ajout de propriétés personnalisées :

L'ajout de propriétés personnalisées est simple. Définissez-les simplement dans l'élément :root ou dans toute autre portée valide et attribuez-leur une valeur en utilisant le préfixe --.

Exemple :

Considérez le code CSS suivant :

:root {
  --color-link: #04b;
  --color-greenurl: 13px;
}

Dans cet exemple, --color-link et --color-greenurl sont des propriétés personnalisées. Les développeurs peuvent ensuite référencer ces propriétés dans tout leur code CSS à l'aide de la fonction var().

Avantages des propriétés personnalisées :

• Réutilisabilité : Les propriétés personnalisées permettent une réutilisation transparente des éléments de conception communs dans plusieurs feuilles de style et composants.
• Centralisé Gestion :Ils fournissent un emplacement centralisé pour gérer les valeurs de conception à l'échelle du site, réduisant ainsi le risque d'incohérences.
• Style dynamique :En attribuant des variables aux propriétés personnalisées, les développeurs peuvent implémenter des style basé sur les préférences de l'utilisateur ou les requêtes multimédias.

Pour une documentation et des exemples plus complets, reportez-vous à la spécification des propriétés personnalisées du W3C à l'adresse [w3.org/TR/css-variables/](https://www.w3.org/TR/css-variables/).

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!