Warum können CSS-Variablen nicht direkt in der Funktion „url()' verwendet werden?

CSS-Variablen mit url() interpolieren

Benutzerdefinierte Eigenschaften (CSS-Variablen) bieten eine effektive Möglichkeit, Stilwerte zu speichern und wiederzuverwenden. Beim Versuch, diese Variablen innerhalb der Funktion url() zu interpolieren, sind Benutzer jedoch auf Herausforderungen gestoßen.

Warum können CSS-Variablen nicht mit url() interpoliert werden?

Trotz der Interpolationsfähigkeiten von CSS-Funktionen wie rgba() stellt url() eine bemerkenswerte Ausnahme dar. Das Problem entsteht, weil der Parser url(var(--url)) als einzelnes ungültiges url()-Token und nicht als Funktionsaufruf interpretiert. Dies verhindert, dass der var()-Ausdruck ausgewertet wird, und führt zu einer ungültigen Hintergrunddeklaration.

Legacy-Gründe

Die Unfähigkeit, Variablen in url() zu interpolieren, kann darauf zurückgeführt werden aus Legacy-Gründen. Das Parsing des url()-Tokens ist unverändert geblieben, um die Abwärtskompatibilität mit früheren CSS-Versionen aufrechtzuerhalten.

Alternative Lösungen

Obwohl eine Variableninterpolation mit url() dort nicht möglich ist sind alternative Ansätze, um einen ähnlichen Effekt zu erzielen:

1. URL-Ausdruck in Benutzerdefiniert definieren Eigenschaft: Anstatt Variablen innerhalb der Funktion url() zu interpolieren, geben Sie die gesamte URL als benutzerdefinierte Eigenschaft an. Zum Beispiel:

:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background: var(--url);
}

2. JavaScript verwenden: Mit JavaScript können Sie den url()-Ausdruck dynamisch aus CSS-Variablen erstellen und ihn mithilfe der Hintergrundeigenschaft anwenden.

Das obige ist der detaillierte Inhalt vonWarum können CSS-Variablen nicht direkt in der Funktion „url()' verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!