Comment obtenir des valeurs héritées avec des variables CSS ?

Comment stocker la valeur héritée dans une variable CSS (alias propriété personnalisée) ?

Scénario

Considérez le code CSS suivant :

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

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 0, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

Dans ce code, nous utilisons --color pour contrôler l'arrière-plan du pseudo-élément de l'élément .box. Cependant, nous pouvons rencontrer une situation dans laquelle nous souhaitons hériter de la couleur de l'élément .box parent.

Défi d'héritage de variable CSS

En CSS, le mot-clé hériter n'est pas pris en charge comme valeur pour Variables CSS. Cela signifie que nous ne pouvons pas définir directement --color pour hériter pour obtenir l'effet souhaité.

Solution : utiliser la valeur de repli et la valeur initiale

Pour surmonter cette limitation, nous pouvons utiliser deux techniques :

1. Utilisation de la valeur de repli :

En utilisant la valeur de repli dans les variables CSS, nous pouvons indiquer à la propriété d'utiliser l'héritage si --color n'est pas explicitement défini.

background: var(--color, inherit);

Cependant, dans ce cas, comme --color est toujours défini au niveau racine et hérité, la valeur de secours ne sera jamais utilisée.

2. Utilisation de la valeur initiale :

Nous pouvons utiliser la valeur initiale pour "undefine" --color et forcer l'utilisation de la valeur de repli. Conformément à la spécification CSS, la valeur initiale est une valeur vide, qui a une interaction spéciale avec var().

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

.box {
  ...
  --color: initial;
}

Avec cette modification, nous pouvons obtenir un héritage de valeur héritée dans la variable CSS, nous permettant pour contrôler la couleur d'arrière-plan en fonction de la couleur de l'élément parent.

<div class="box red">

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!