Pouvons-nous utiliser des propriétés personnalisées CSS pour hériter des valeurs des éléments parents ?

Pouvons-nous stocker les valeurs héritées dans les propriétés personnalisées CSS ?

En CSS, les propriétés personnalisées (également appelées variables CSS) offrent un moyen pratique de stocker et de réutiliser des valeurs tout au long de un document. Cependant, ces variables peuvent-elles hériter des valeurs de leurs éléments parents ?

Considérons un exemple de code :

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

.box {
  width: 50px;
  height: 50px;
  background: var(--color);
}

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

.blue {
  background: rgba(0, 255, 255, 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 cet exemple, nous voulons hériter de la couleur d'arrière-plan de l'élément .box pour c'est le pseudo-élément :before utilisant des variables CSS. Cependant, la variable --color est définie au niveau :root et le pseudo-élément :before est imbriqué dans .box.

Définir l'arrière-plan : hériter sur :before ne fonctionne pas, car les propriétés personnalisées sont prioritaires sur les valeurs héritées.

La solution : repli de la valeur initiale

Pour stocker une valeur héritée dans une variable CSS, nous pouvons utiliser la valeur initiale CSS comme solution de repli. La valeur initiale représente l'état par défaut ou non défini d'une propriété.

Dans notre cas, nous pouvons modifier notre code comme suit :

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

En spécifiant initial comme valeur de repli pour var( --color), nous forçons l'utilisation de la valeur héritée lorsque --color n'est pas explicitement défini. Cela nous permet d'hériter de la couleur d'arrière-plan de l'élément parent.

Pour démontrer cela, définissons la couleur d'arrière-plan de .box sur gris. Même si nous ne définissons pas explicitement --color dans ce cas, le pseudo-élément :before héritera toujours de la couleur d'arrière-plan de .box en raison de la valeur de repli initiale.

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

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!