Warum werden meine benutzerdefinierten CSS-Eigenschaften mit Gültigkeitsbereich ignoriert, wenn sie in Outer-Scope-Berechnungen verwendet werden?

Benutzerdefinierte CSS-Eigenschaft wird ignoriert, wenn sie zum Berechnen von Variablen im äußeren Gültigkeitsbereich verwendet wird

Beim Versuch, zusammensetzbares, lose gekoppeltes CSS zu erstellen, ist es wichtig, Folgendes zu tun den Geltungsbereich benutzerdefinierter Eigenschaften verstehen. In bestimmten Szenarien wirken sich Änderungen an einer bereichsbezogenen benutzerdefinierten Eigenschaft in einem untergeordneten Element möglicherweise nicht wie erwartet auf das übergeordnete Element aus.

Ein solches Szenario tritt auf, wenn eine benutzerdefinierte Eigenschaft zum Berechnen einer Variablen in einem äußeren Bereich verwendet wird. Das Problem tritt auf, wenn die benutzerdefinierte Eigenschaft erneut im untergeordneten Element definiert wird, wodurch die anfängliche Auswertung vom übergeordneten Element ignoriert wird.

Um dies zu veranschaulichen, betrachten Sie das folgende Beispiel:

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

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

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

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

ol {
  font: 1em sans-serif;
}

.size-1 {
  font-size: var(--size-1);
}

.size-2 {
  font-size: var(--size-2);
}

.size-3 {
  font-size: var(--size-3);
}

In diesem Beispiel werden die --size-*-Eigenschaften auf der Stammebene mithilfe der benutzerdefinierten Eigenschaft --scale berechnet. Allerdings ist innerhalb der .scale-*-Klassen die Eigenschaft --scale erneut definiert. Dies führt dazu, dass der geerbte Wert von --scale vom Stammelement ignoriert wird, was dazu führt, dass die --size-*-Eigenschaften mit dem Standardwert von --scale berechnet werden: 1.

Um dieses Problem zu vermeiden, Es ist wichtig, benutzerdefinierte Eigenschaften auf der entsprechenden Ebene zu definieren und eine Neudefinition in untergeordneten Elementen zu vermeiden. Dadurch wird sichergestellt, dass bereichsspezifische benutzerdefinierte Eigenschaften effektiv verwendet werden können, um Variablen in äußeren Bereichen zu berechnen und zusammensetzbares, lose gekoppeltes CSS zu erreichen.

Das obige ist der detaillierte Inhalt vonWarum werden meine benutzerdefinierten CSS-Eigenschaften mit Gültigkeitsbereich ignoriert, wenn sie in Outer-Scope-Berechnungen verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!