CSS 変数を「url()」関数内で直接使用できないのはなぜですか?

url() による CSS 変数の補間

カスタム プロパティ (CSS 変数) は、スタイル値を保存して再利用する効果的な方法を提供します。ただし、url() 関数内でこれらの変数を補間しようとすると、ユーザーは課題に直面しました。

url() で CSS 変数を補間できないのはなぜですか?

rgba() のような CSS 関数の補間機能にもかかわらず、url() には注目すべき例外があります。この問題は、パーサーが url(var(--url)) を関数呼び出しではなく、単一の無効な url() トークンとして解釈するために発生します。これにより、var() 式の評価が妨げられ、無効なバックグラウンド宣言が発生します。

従来の理由

url() で変数を補間できないことが原因である可能性があります。レガシーな理由に。 url() トークンの解析は、以前の CSS バージョンとの下位互換性を維持するために変更されていません。

代替ソリューション

url() では変数の補間はできませんが、同様のことを達成するための代替アプローチ効果:

1. カスタム プロパティでの URL 式の定義: url() 関数内で変数を補間する代わりに、URL 全体をカスタム プロパティとして指定します。例:

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

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

2. JavaScript を使用する: JavaScript を使用すると、CSS 変数から url() 式を動的に作成し、background プロパティを使用して適用できます。

以上がCSS 変数を「url()」関数内で直接使用できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。