webentwicklung-frage-antwort-db.com.de

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

Ich möchte meine Hintergrund-URLs in benutzerdefinierten Eigenschaften (CSS-Variablen) speichern und mit der background-Eigenschaft 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 in Sass oder LESS mit der Interpolationsfunktion problemlos möglich ist, aber ich bin neugierig, ob es eine Möglichkeit gibt, dies ohne Vorprozessor zu tun.

21
YashArora

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

Dies ist jedoch nicht mit url() möglich, da url(var(--url)) nicht als url(-Funktionstoken gefolgt von var(--url) gefolgt von ), sondern einem einzelnen url()-Token analysiert wird, das ungültig ist, da var(--url) als URL selbst und nicht in Anführungszeichen angegebene URLs in url() Tokens dürfen keine Klammern enthalten, es sei denn, sie werden umgangen. Dies bedeutet, dass die Substitution niemals tatsächlich erfolgt, da der Parser niemals var()-Ausdrücke im Eigenschaftswert sieht - in der Tat ist Ihre background-Deklaration völlig ungültig.

Wenn Sie nichts davon verstanden haben, ist das in Ordnung. Wisse nur, dass du var() Interpolation nicht mit url() aus älteren Gründen verwenden kannst.

Auch wenn das in der Frage dargestellte Problem mit dem älteren url()-Token zusammenhängt, können Sie dies nicht tun, indem Sie URL-Token aus mehreren var()-Ausdrücken erstellen, falls Sie über etwas wie --uo: url(; --uc: ); oder --uo: url("; --uc: "); und background: var(--uo) var(--url) var(--uc); nachdenken. Dies liegt daran, dass benutzerdefinierte Eigenschaften keine nicht übereinstimmenden Zeichenfolge-Trennzeichen oder Teile von url()-Token (als fehlerhafte URL-Token bezeichnet) enthalten dürfen.

Wenn Sie eine URL in einer benutzerdefinierten Eigenschaft angeben möchten, müssen Sie den gesamten url()-Ausdruck ausschreiben und den gesamten Ausdruck ersetzen:

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

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

Oder verwenden Sie JavaScript anstelle von var(), um die Interpolation durchzuführen.

27
BoltClock

Ich hatte das gleiche Problem in einem Projekt mit Cordova, also verwendete ich:

```
header{
  --bg-header: url(../img/header_home.png) left center/cover no-repeat;
  background: var(--bg-header,
      url("../img/header_home.png") left center/cover no-repeat
  );
}
```

Wenn Sie url ("") mit Anführungszeichen in der --var -Deklaration verwenden, wird der Wert anscheinend nicht funktionieren.

0
LucasTelesx