Gibt es eine Möglichkeit, CSS-Variablen mit URL() zu interpolieren?

Question

Ich möchte meine Hintergrund-URLs in benutzerdefinierten Eigenschaften (CSS-Variablen) speichern und sie mit der Hintergrundeigenschaft verwenden. Ich konnte jedoch keine Möglichkeit finden, den String zu interpolieren, wenn er als Parameter in url() verwendet wird.

Hier ist mein Beispielcode:

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

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

Ich weiß, dass dies kann leicht in Sass oder weniger die Interpolation-Funktion durchgeführt werden, aber ich bin gespannt, ob es eine Möglichkeit, es ohne prä- zu tun ist, Prozessor.

Answer 1

Sie können die Interpolation mit den meisten CSS-Funktionen durchführen, einschließlich rgba() (siehe ein Beispiel here). In der Tat ist die Interpolation eines der Hauptmerkmale von benutzerdefinierten Eigenschaften.

Aber man kann dies nicht mit url(), wie url(var(--url)) nicht als url( Funktions-Token von var(--url) von einem ) gefolgt gefolgt analysiert wird, sondern ein einzigen url() Token, das ungültig ist, weil die var(--url) als URL behandelt wird selbst und Nicht angebene URLs in url() Token dürfen keine Klammern enthalten, es sei denn, sie sind maskiert. Dies bedeutet, dass die Substitution niemals tatsächlich stattfindet, da der Parser niemals var() Ausdrücke im Eigenschaftswert sieht - Ihre background Deklaration ist in der Tat vollständig ungültig.

Wenn Sie nichts davon verstanden haben, ist das in Ordnung. Nur wissen, dass Sie var() Interpolation mit url() aus Legacy-Gründen nicht verwenden können.

Auch wenn das Problem in der Frage dargestellt, das Vermächtnis url() Token verwandt ist, können Sie diese Tokens durch den Aufbau URL nicht entweder aus mehreren var() Ausdrücke, falls Sie so etwas wie --uo: url(; --uc:); oder --uo: url("; --uc: "); versuchen, dachten und background: var(--uo) var(--url) var(--uc); . Dies liegt daran, custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens).

Wenn Sie eine URL in einer benutzerdefinierten Eigenschaft angeben möchten, müssen Sie den gesamten url() Ausdruck schreiben, und Ersatz, dass gesamte Ausdruck:

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

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

Oder verwenden Sie JavaScript statt var() die Interpolation durchzuführen .