Puis-je utiliser des variables CSS dans une fonction `url()` ?

Puis-je interpoler des variables CSS dans une expression d'URL ?

En CSS, les propriétés personnalisées (également appelées variables CSS) constituent un moyen pratique pour stocker et modifier les valeurs par programme. Cependant, les utilisateurs peuvent rencontrer des limitations lorsqu'ils tentent d'interpoler des valeurs de variable dans la fonction URL, comme dans la propriété background.

Exemple :

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

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

Malheureusement, une telle interpolation n'est pas possible dans la fonction url() pour des raisons héritées. Les analyseurs CSS traitent url(var(--url)) non pas comme des jetons séparés, mais comme un seul jeton url() invalide.

Bien que l'interpolation soit couramment disponible pour les fonctions CSS comme rgba(), elle n'est pas autorisée pour url() en raison d'ambiguïtés potentielles et de problèmes d'analyse.

Par conséquent, définir explicitement l'intégralité de la chaîne d'URL dans la propriété personnalisée est nécessaire :

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

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

Alternativement, JavaScript peut être utilisé pour réaliser l'interpolation souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!