Comment hériter de valeurs à l'aide de variables CSS avec une solution de repli ?

Comment hériter des valeurs à l'intérieur des variables CSS

Les variables CSS, également connues sous le nom de propriétés personnalisées, nous permettent de stocker et de manipuler des valeurs d'une manière qui peut être réutilisée dans tout notre feuille de style. Cependant, une limitation des variables CSS est qu'elles ne peuvent pas hériter des valeurs de leurs éléments parents.

Problème

Par exemple, considérons le code suivant :

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

.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 avons une règle :root qui définit une variable --color avec une valeur par défaut de rgba(20, 20, 20, 0.5). Nous avons également une classe .box qui définit certains styles pour un élément rectangulaire et un pseudo-élément :before qui crée un élément circulaire à l'intérieur de la boîte.

La propriété background du pseudo-élément :before est définie à var(--color), ce qui signifie qu'il héritera de la valeur de la variable --color. Cependant, nous pouvons remplacer la valeur de la variable --color pour chaque boîte en utilisant des styles en ligne, comme indiqué dans l'exemple suivant :

<div class="box red">

Les deux premières boîtes auront leur variable --color définie sur rgba(0, 255, 0, 0.5) et rgba(0, 255, 255, 0.5) respectivement, tandis que la troisième case tentera d'hériter de la variable --color de son élément parent. Cependant, comme nous l'avons mentionné précédemment, les variables CSS ne peuvent pas hériter de valeurs, donc la variable --color de la troisième case restera à sa valeur par défaut de rgba(20, 20, 20, 0.5).

Solution

La fonction var() fournit un moyen de définir une valeur de secours pour une variable CSS au cas où la variable n'est pas définie ou est définie sur sa valeur initiale. La valeur de secours est spécifiée comme deuxième argument de la fonction var(), comme indiqué dans l'exemple suivant :

background: var(--color, inherit);

Dans cet exemple, si la variable --color n'est pas définie ou est définie sur son valeur initiale, la propriété background héritera de la couleur de l'élément parent. C'est exactement le comportement que nous souhaitons dans ce cas.

Voici le code mis à jour avec la valeur de repli ajoutée :

:root {
  --color: rgba(25, 25, 25, 0.5); /* Defined as the default value */
}

.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, 0, 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, inherit);
  filter: invert(1);
}

Maintenant, les trois cases hériteront de la couleur de leur parent élément, même si la variable --color est définie sur une valeur différente dans les styles en ligne.

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!