Dans le monde du CSS, il existe depuis longtemps un besoin pour un moyen de définir des variables globales pouvant être utilisées partout une feuille de style. Cela a été une frustration majeure pour les développeurs, car il peut être extrêmement fastidieux de modifier manuellement chaque instance d'une valeur lors d'une modification.
La bonne nouvelle :
Enfin, les propriétés personnalisées CSS (variables) sont arrivées ! Avec l'introduction de variables, les développeurs peuvent désormais centraliser les valeurs et les couleurs communes, ce qui facilite incroyablement la gestion des thèmes et l'application des modifications.
1. Définissez la classe racine :
Créez un pseudo-élément :root en haut de votre feuille de style. Cela servira de conteneur pour vos propriétés personnalisées.
<code class="css">:root { }</code>
2. Définir les variables :
Dans l'élément :root, déclarez vos variables en utilisant la syntaxe suivante :
<code class="css">--variable-name: value;</code>
3. Utiliser des variables :
Vous pouvez désormais utiliser les variables n'importe où dans votre document CSS à l'aide de la fonction var() :
<code class="css">h1 { color: var(--color-primary); }</code>
Les propriétés personnalisées CSS sont largement prises en charge par les navigateurs modernes, notamment Firefox et Chrome. , Safari, Opera, Edge et Android.
Les propriétés personnalisées CSS changent la donne en matière de style CSS. Ils offrent de puissantes fonctionnalités pour gérer les valeurs et les thèmes globaux, simplifiant la maintenance du code et améliorant l'expérience globale des développeurs. Adoptez cette nouvelle fonctionnalité et libérez le potentiel des variables CSS dans vos projets.
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!