Que sont les propriétés CSS Double-Dash et comment fonctionnent-elles ?

Exploration des propriétés CSS énigmatiques à double tiret

Vous avez peut-être rencontré un code CSS particulier comportant des noms de propriétés préfixés par des doubles tirets. Ce ne sont pas des propriétés CSS classiques mais des propriétés personnalisées introduites dans CSS3.

Comprendre les propriétés personnalisées

Les propriétés personnalisées, également appelées variables CSS, vous permettent de définir et de réutiliser des valeurs. tout au long de votre feuille de style. Ils permettent flexibilité et maintenabilité en centralisant les éléments de conception.

Syntaxe et utilisation

Les propriétés personnalisées sont déclarées dans l'élément racine (:root) en utilisant la syntaxe suivante :

:root {
  --property-name: property-value;
}

Vous pouvez ensuite accéder à la valeur de la propriété personnalisée dans n'importe quel élément en utilisant la fonction var() function :

#element {
  color: var(--property-name);
}

Exemple du W3C :

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

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

Cet exemple définit des propriétés personnalisées pour les couleurs principales et d'accentuation et utilise la variable de valeur de couleur dans le # foo h1 selector.

Référence et documentation

Pour une documentation complète sur les propriétés personnalisées, reportez-vous à la page des spécifications du W3C :

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!