Pourquoi les propriétés personnalisées CSS étendues ne parviennent-elles pas à remplacer les valeurs héritées ?

Propriétés personnalisées CSS étendues : remplacement des valeurs héritées

Lorsque vous travaillez avec des propriétés personnalisées CSS, la portée dans laquelle elles sont définies affecte leur comportement. Dans ce cas, les propriétés personnalisées étendues sont utilisées pour mettre à l'échelle les tailles en fonction d'une variable définie dans une portée externe. Cependant, l'effet souhaité n'est pas obtenu, car les trois listes apparaissent à la même échelle.

Comprendre le problème de portée

Propriétés personnalisées définies avec -- qui ne sont pas imbriquées dans d'autres règles sont considérées comme ayant une portée globale et affectent tous les éléments du document. Toutefois, lorsqu'une propriété personnalisée est définie dans une règle imbriquée, elle s'étend à cette règle et à ses descendants. Cela signifie que tous les éléments en dehors de cette règle n'hériteront pas de la valeur de la propriété personnalisée.

Réinitialisation de la propriété personnalisée

Dans le code fourni, l'élément racine définit le - -scale propriété personnalisée et calcule les valeurs --size-* en fonction de celle-ci. Par la suite, les éléments enfants définissent leur propre propriété personnalisée --scale. Cela a pour conséquence que les éléments enfants remplacent la valeur --scale héritée de l'élément racine.

Pour résoudre ce problème, il est nécessaire de réinitialiser la propriété personnalisée --scale dans les éléments enfants à une nouvelle valeur qui sera utilisé pour les calculs. Ce faisant, la propriété personnalisée est effectivement étendue aux éléments enfants et à leurs descendants.

Code mis à jour

Voici une version mise à jour du code avec les correctifs :

:root {
  --size-1: calc(1 * var(--scale, 1) * 1rem);
  --size-2: calc(2 * var(--scale, 1) * 1rem);
  --size-3: calc(3 * var(--scale, 1) * 1rem);
}

.size-1 { font-size: var(--size-1) }
.size-2 { font-size: var(--size-2) }
.size-3 { font-size: var(--size-3) }

.scale-1x { --scale: 1 }
.scale-2x { --scale: 2 }
.scale-3x { --scale: 3 }

html {
  font: 1em sans-serif;
  background: papayawhip;
}

ol {
  float: left;
  list-style: none;
  margin: 1rem;
}

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!