Warum werden benutzerdefinierte CSS-Eigenschaften mit Gültigkeitsbereich manchmal nicht korrekt für Berechnungen kaskadiert?

Bereichsbezogene Vererbung benutzerdefinierter Eigenschaften in CSS

Beim Definieren benutzerdefinierter Eigenschaften in CSS spielt der Bereich eine entscheidende Rolle bei deren Vererbung und Verwendung. Es kann jedoch vorkommen, dass eine benutzerdefinierte Eigenschaft mit Gültigkeitsbereich ignoriert wird, wenn sie zur Berechnung einer Variablen in einem äußeren Gültigkeitsbereich verwendet wird. Dies kann auftreten, wenn eine benutzerdefinierte Eigenschaft innerhalb eines untergeordneten Elements neu definiert wird, was zu unerwarteten Ergebnissen führt.

Erläuterung des Geltungsbereichs

Benutzerdefinierte Eigenschaften werden mit dem Präfix -- und definiert kann mit den Schlüsselwörtern :root oder :host auf ein bestimmtes Element oder einen Teilbaum beschränkt werden. Auf bereichsbezogene Eigenschaften kann nur innerhalb des Elements oder seiner Nachkommen zugegriffen werden, was eine Kapselung und kontrollierte Vererbung ermöglicht.

Problem mit bereichsbezogenen Eigenschaften und Berechnungen

In Ihrem Beispiel haben Sie definiert die bereichsbezogene benutzerdefinierte Eigenschaft --scale im :root-Selektor, um die Werte von --size-1, --size-2 und zu berechnen --Größe-3. Innerhalb der untergeordneten Elemente (.scale-1x, .scale-2x und .scale-3x) haben Sie jedoch --scale neu definiert. Dies führt zu einem Problem, da CSS benutzerdefinierte Eigenschaften von oben nach unten auswertet. Sobald eine benutzerdefinierte Eigenschaft auf einer bestimmten Ebene ausgewertet wurde, kann sie in verschachtelten Elementen nicht mehr überschrieben oder geändert werden.

CSS-Technik für benutzerdefinierte Eigenschaften für Composable Scaling

Um das Gewünschte zu erreichen Um den Effekt der Skalierung von Listen auf verschiedenen Ebenen ohne Kopplung zu erzielen, können Sie die folgende Technik verwenden:

: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;
}

Bei diesem Ansatz wird die Eigenschaft --scale verwendet bleibt auf die :root-Ebene beschränkt. Anstatt es jedoch direkt zur Berechnung der Schriftgrößen zu verwenden, verwenden wir es innerhalb der Funktion var() innerhalb der Klassen .size-1, .size-2 und .size-3. Dadurch kann die Schriftgröße den Wert von --scale erben, wenn sie in einem äußeren Bereich festgelegt ist. Wenn --scale nicht bereitgestellt wird, wird auf den Standardwert 1rem zurückgegriffen.

Mit dieser Technik können Sie Skalierungseffekte komponieren, ohne die Elemente zu koppeln. Sie können die Klassen .scale-1x, .scale-2x und .scale-3x auf verschiedene Listenelemente oder Gruppen anwenden, um die gewünschte Skalenvariation zu erreichen.

Das obige ist der detaillierte Inhalt vonWarum werden benutzerdefinierte CSS-Eigenschaften mit Gültigkeitsbereich manchmal nicht korrekt für Berechnungen kaskadiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!