Pourquoi les propriétés personnalisées CSS étendues ne parviennent-elles parfois pas à se mettre en cascade correctement pour les calculs ?

Héritage des propriétés personnalisées étendues en CSS

Lors de la définition de propriétés personnalisées en CSS, la portée joue un rôle crucial dans leur héritage et leur utilisation. Toutefois, vous pouvez rencontrer des situations dans lesquelles une propriété personnalisée étendue est ignorée lorsqu'elle est utilisée pour calculer une variable dans une étendue externe. Cela peut se produire lorsqu'une propriété personnalisée est redéfinie dans un élément enfant, entraînant des résultats inattendus.

Explication de la portée

Les propriétés personnalisées sont définies à l'aide du préfixe -- et peut être étendu à un élément ou un sous-arbre spécifique à l'aide des mots-clés :root ou :host. Les propriétés étendues ne sont accessibles qu'au sein de l'élément ou de ses descendants, ce qui permet l'encapsulation et l'héritage contrôlé.

Problème avec les propriétés et les calculs étendus

Dans votre exemple, vous avez défini la propriété personnalisée étendue --scale dans le sélecteur :root pour calculer les valeurs de --size-1, --size-2 et --size-3. Cependant, à l'intérieur des éléments enfants (.scale-1x, .scale-2x et .scale-3x), vous avez redéfini --scale. Cela crée un problème car CSS évalue les propriétés personnalisées de haut en bas. Une fois qu'une propriété personnalisée est évaluée à un certain niveau, elle ne peut pas être remplacée ou modifiée dans les éléments imbriqués.

Technique de propriété personnalisée CSS pour la mise à l'échelle composable

Pour obtenir l'objectif souhaité effet de mise à l'échelle des listes à différents niveaux sans couplage, vous pouvez utiliser la technique suivante :

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

.size-1, .size-2, .size-3 {
  font-size: var(--scale, 1rem);
}

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

Dans cette approche, la propriété --scale reste étendu au niveau :root. Cependant, au lieu de l'utiliser directement pour calculer les tailles de police, nous l'utilisons dans la fonction var() à l'intérieur des classes .size-1, .size-2 et .size-3. Cela permet à la taille de la police d'hériter de la valeur de --scale si elle est définie dans une portée externe. Si --scale n'est pas fourni, il revient à une valeur par défaut de 1rem.

Avec cette technique, vous pouvez composer des effets de mise à l'échelle sans coupler les éléments. Vous pouvez appliquer les classes .scale-1x, .scale-2x et .scale-3x à différents éléments ou groupes de liste pour obtenir la variation d'échelle souhaitée.

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!