Comment stocker les valeurs héritées dans les variables CSS ?

Stockage de la valeur héritée dans les variables CSS

En CSS, nous rencontrons souvent le besoin de manipuler des propriétés en fonction de la valeur héritée, comme hériter de la couleur d'arrière-plan d'un élément pour ses pseudo-éléments. Cependant, l'utilisation du mot cléherit dans une variable CSS ne fonctionne pas toujours comme prévu.

Le problème

Considérez cet exemple simplifié :

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  /* Properties... */
}

.box:before {
  background: var(--color);
  /* Other properties... */
}

Dans ce scénario, nous ajoutons un pseudo-élément (::before) à l'élément .box et définissons sa propriété background pour utiliser la variable CSS --color. Cependant, si l'on souhaite que le pseudo-élément hérite de la couleur de fond du .box à l'aide du mot cléherit, cela ne fonctionnera pas comme prévu.

La solution

Pour stocker une valeur héritée dans une variable CSS, nous pouvons utiliser la valeur de repli de la propriété. La valeur de secours est spécifiée comme deuxième argument de la fonction var(). Par exemple :

background: var(--color, inherit);

En faisant cela, nous disons à la propriété background d'utiliser l'hériter comme valeur de secours si la variable --color n'est pas définie.

Cependant, dans notre cas, cela ne fonctionnera pas car --color est toujours défini au niveau :root. Pour surmonter ce problème, nous pouvons utiliser la valeur initiale pour non défini notre propriété personnalisée et forcer l'utilisation de la valeur de secours :

.box:before {
  background: var(--color, inherit);
  /* Other properties... */
}

/* Undefine --color using the initial value */
.box:before {
  --color: initial;
}

La valeur initiale définit la variable CSS à sa valeur initiale, qui est un vide valeur. Lorsqu'une variable CSS a une valeur initiale, var() la traite comme ayant sa valeur de repli.

En utilisant cette approche, nous pouvons stocker la valeur héritée dans la variable CSS --color et l'utiliser efficacement pour le propriété background du pseudo-élément.

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!