Les variables CSS peuvent-elles être interpolées avec la fonction `url()` ?

Interpolation avec des variables CSS

Les variables CSS peuvent-elles être interpolées avec la fonction url() ?

Les propriétés CSS personnalisées facilitent l'interpolation pour la plupart des fonctions, y compris rgba(). Cependant, l'interpolation avec url() présente des défis pour des raisons héritées.

Quelle est la limitation avec url() ?

Le jeton url() ne peut pas être divisé en var() car l'analyseur traite var(--url) comme une URL sans guillemets. Par conséquent, l'interpolation ne se produit pas, ce qui rend la déclaration d'arrière-plan invalide.

Approches alternatives

Pour éviter la limitation url(), les options viables incluent :

• Spécifier l'intégralité de l'expression url() dans la personnalisation property :

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

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

• Utilisation de JavaScript pour l'interpolation au lieu de var().

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!