web-dev-qa-db-fra.com

Est-il possible d'interpoler des variables CSS avec url ()?

Je souhaite stocker mes URL d'arrière-plan dans des propriétés personnalisées (variables CSS) et les utiliser avec la propriété background. Cependant, je ne pouvais pas trouver un moyen d'interpoler la chaîne lorsque je l'utilisais comme paramètre dans url().

Voici mon exemple de code:

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

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

Je sais que cela peut être facilement fait dans Sass ou LESS en utilisant la fonction d'interpolation, mais je suis curieux de savoir s'il existe un moyen de le faire sans pré-processeur.

csscss-variables
21
YashArora

Vous pouvez effectuer une interpolation avec la plupart des fonctions CSS, y compris rgba() (voir un exemple ici ). En fait, l’interpolation est l’une des principales caractéristiques des propriétés personnalisées.

Mais vous ne pouvez pas le faire avec url(), car url(var(--url)) n'est pas analysé comme un jeton de fonction url( suivi de var(--url) suivi d'un ), mais d'un seul jeton url() non valide car le var(--url) est traité comme une URL elle-même et des URL non citées dans url(). Les jetons ne peuvent pas contenir de parenthèses à moins d'être échappés. Cela signifie que la substitution ne se produit jamais, car l'analyseur ne voit jamais d'expressions var() dans la valeur de la propriété. En effet, votre déclaration background est complètement invalide.

Si vous n'avez pas compris cela, c'est bien. Sachez simplement que vous ne pouvez pas utiliser l'interpolation var() avec url() pour des raisons héritées.

Même si le problème décrit dans la question est lié au jeton url() hérité, vous ne pouvez pas le faire en créant des jetons URL à partir de plusieurs expressions var(), au cas où vous songeriez à essayer quelque chose comme --uo: url(; --uc: ); ou --uo: url("; --uc: "); et background: var(--uo) var(--url) var(--uc);. En effet, les propriétés personnalisées ne peuvent pas contenir de délimiteurs de chaîne sans correspondance ni de parties de jetons url() (appelés jetons d’URL incorrects) .

Si vous souhaitez spécifier une URL dans une propriété personnalisée, vous devez écrire l'expression url() entière et la substituer à l'expression suivante:

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

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

Ou utilisez JavaScript au lieu de var() pour effectuer l'interpolation.

27
BoltClock

J'ai eu le même problème sur un projet avec Cordova alors j'ai utilisé:

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

Apparemment, si vous utilisez url ("") avec des guillemets doubles dans la déclaration --var , la valeur ne fonctionnera pas.

0
LucasTelesx