Pourquoi les variables CSS ne peuvent-elles pas être utilisées directement dans la fonction `url()` ?

Interpolation de variables CSS avec url()

Les propriétés personnalisées (variables CSS) offrent un moyen efficace de stocker et de réutiliser les valeurs de style. Cependant, les utilisateurs ont rencontré des difficultés lorsqu'ils ont tenté d'interpoler ces variables dans la fonction url().

Pourquoi les variables CSS ne peuvent-elles pas être interpolées avec url() ?

Malgré les capacités d'interpolation des fonctions CSS comme rgba(), url() présente une exception notable. Le problème se pose car l'analyseur interprète url(var(--url)) comme un seul jeton url() non valide, plutôt que comme un appel de fonction. Cela empêche l'évaluation de l'expression var() et conduit à une déclaration d'arrière-plan non valide.

Raisons héritées

L'incapacité d'interpoler les variables dans url() peut être attribuée à des raisons héritées. L'analyse du jeton url() est restée intacte pour maintenir une compatibilité descendante avec les versions CSS antérieures.

Solutions alternatives

Bien que l'interpolation de variables ne soit pas possible avec url(), il existe des approches alternatives pour obtenir un effet similaire :

1. Définir l'expression d'URL dans Custom Propriété : Au lieu d'interpoler des variables dans la fonction url(), spécifiez l'URL entière en tant que propriété personnalisée. Par exemple :

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

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

2. Utiliser JavaScript : Avec JavaScript, vous pouvez créer dynamiquement l'expression url() à partir de variables CSS et l'appliquer à l'aide de la propriété background.

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!