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

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

Malgré l'utilisation généralisée des variables CSS, il reste une limitation en matière d'interpolation dans la fonction url(). Cette limitation découle de la nature héritée du jeton url().

Dans le CSS moderne, l'interpolation des propriétés personnalisées est une fonctionnalité fondamentale. Il permet d'insérer des valeurs dynamiques dans diverses fonctions, telles que rgba(). Cependant, la fonction url() constitue une exception à cette règle.

Lors de l'utilisation de url(var(--url)), l'analyseur l'interprète comme un seul jeton url(), et non comme une combinaison de un jeton de fonction url() et une expression variable. Par conséquent, la variable est traitée comme une URL elle-même, ce qui rend l'interpolation invalide.

Pour contourner ce problème, évitez de construire des jetons d'URL à partir de plusieurs expressions de variable dans url(). Cela inclut des approches telles que --uo: url(; --uc: ); et arrière-plan : var(--uo) var(--url) var(--uc);. Les propriétés personnalisées ne peuvent pas contenir de délimiteurs de chaîne sans correspondance ni de parties de jetons url().

Pour les arrière-plans, la solution consiste à spécifier l'expression url() complète dans la propriété personnalisée et à la remplacer directement :

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

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

Alternativement, JavaScript peut être utilisé pour effectuer 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!