Comment puis-je stocker une valeur héritée dans une variable CSS ?

Héritage des valeurs dans les variables CSS

Dans le domaine du CSS, les propriétés personnalisées, également appelées variables CSS, offrent une immense flexibilité et un contrôle sur styles. Une question courante se pose lorsque nous souhaitons stocker une valeur héritée dans une variable. Plongeons dans une solution.

Le défi

Considérez le code suivant :

:root {
  --color:rgba(20,20,20,0.5);
}

.box {
  --color: inherit;
  background: var(--color);
}

Ici, nous visons à ce que l'arrière-plan hérite du couleur de l'élément :root. Cependant, utiliser hériter comme valeur de --color ne fonctionne pas en raison des règles d'héritage.

La solution : valeur de repli et mot-clé initial

Pour stocker une valeur héritée , nous pouvons exploiter la fonctionnalité de valeur de repli des variables CSS. Nous pouvons définir :

background: var(--color, inherit);

Cela indique au navigateur d'utiliser l'héritage si --color n'est pas défini. Cependant, puisque --color est toujours défini au niveau :root, il n'utilisera pas la solution de secours.

Pour résoudre ce problème, nous pouvons réinitialiser --color à sa valeur initiale en utilisant le mot-clé initial :

.box {
  --color: initial;
  background: var(--color, inherit);
}

L'utilisation de initial désactive effectivement la propriété personnalisée, permettant à l'héritage de prendre effet. Ce code héritera avec succès de la couleur de l'élément :root.

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!