Pourquoi mes propriétés personnalisées imbriquées à portée CSS sont-elles ignorées ?

Propriété personnalisée à portée CSS ignorée dans les déclarations imbriquées

Lors de la définition de propriétés personnalisées dans CSS, il est essentiel de comprendre comment la portée affecte leur évaluation. Les propriétés personnalisées étendues ne sont disponibles que localement dans l'élément ou le composant où elles sont définies. Cependant, un défi courant se pose lorsque l'on tente d'utiliser des propriétés personnalisées étendues dans des étendues externes.

Dans ce cas spécifique, l'objectif est de définir un facteur d'échelle via une propriété personnalisée et de l'appliquer à différents éléments. Cependant, comme démontré, tous les éléments de la liste sont mis à l'échelle de la même manière, quelle que soit la classe d'échelle appliquée.

Pour résoudre ce problème, il est crucial de noter que les propriétés personnalisées sont évaluées de haut en bas. Lorsqu'une propriété personnalisée est définie au niveau racine, comme dans cet exemple, toute définition ultérieure de la même propriété dans les éléments imbriqués sera ignorée.

Considérez cette illustration simplifiée :

:root {
  --color: var(--c, blue);
}

span {
  color: var(--color);
}

Ici, la propriété personnalisée --color est définie au niveau racine. Si nous essayons de le remplacer dans un élément span :

<div>
  <div class="box">
    <span>

L'élément span avec la déclaration CSS imbriquée ne deviendra pas rouge. En effet, la propriété personnalisée a déjà été évaluée au niveau racine, en définissant --color sur bleu, et les tentatives de substitution sont ignorées.

En revanche, l'élément span avec l'héritage --c: red deviendra rouge car il hérite de la valeur de la propriété personnalisée de son élément parent.

Pour obtenir l'effet souhaité, il est nécessaire de s'assurer que la propriété personnalisée est évaluée individuellement dans chaque composant imbriqué. Cela peut être fait en définissant la propriété localement au sein de chaque classe ou composant, plutôt qu'au niveau racine.

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!