Que sont les propriétés personnalisées CSS (variables) et comment fonctionnent les préfixes à double tiret ?

Comprendre les propriétés CSS personnalisées préfixées par un double tiret

Dans l'extrait de code que vous avez fourni, vous avez rencontré des propriétés CSS préfixées par un double tiret (--) , tels que --color-link et --font-thin. Ces propriétés appartiennent à un ensemble de propriétés CSS personnalisées, qui sont des propriétés définies par l'utilisateur qui permettent une plus grande flexibilité et une plus grande personnalisation du style CSS.

Selon la spécification du W3C sur les propriétés personnalisées, ces propriétés avec préfixe double tiret sont définis à l'aide de la syntaxe suivante :

--<property-name>: <value>;

où --property-name est le nom de la propriété personnalisée et est la valeur souhaitée pour cette propriété.

Les propriétés personnalisées servent à plusieurs fins :

• Flexibilité stylistique :Elles permettent de modifier facilement les propriétés CSS sur plusieurs éléments, réduisant le besoin de déclarations redondantes.
• Gestion du thème : Les propriétés personnalisées peuvent être utilisées pour définir des variables spécifiques au thème, simplifiant le processus de commutation entre différents thèmes.
• Substitution de variables : Elles permettent l'utilisation de variables comme valeurs pour d'autres propriétés CSS, offrant une flexibilité accrue dans le style.

À l'aide de la fonction var(), vous pouvez accéder aux valeurs des propriétés personnalisées dans d'autres déclarations CSS. Par exemple, dans le code suivant, la propriété color de l'élément #foo h1 est définie sur la valeur de la propriété personnalisée --main-color :

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

Informations de référence

• [Propriétés personnalisées du W3C Spec](https://www.w3.org/TR/css-variables/)
• [MDN Web Docs : Propriétés personnalisées CSS](https://developer.mozilla.org/en-US/ docs/Web/CSS/Using_CSS_custom_properties)
• [Astuces CSS : Tout sur la personnalisation Propriétés](https://css-tricks.com/custom-properties-all-the-things/)

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!