継承された値を CSS 変数に保存するにはどうすればよいですか?

CSS 変数への継承値の保存

CSS では、要素の背景色の継承など、継承された値に基づいてプロパティを操作する必要があることがよくあります。擬似要素の場合。ただし、CSS 変数での継承キーワードの使用は、常に期待どおりに機能するとは限りません。

問題

次の単純化された例を考えてみましょう:

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  /* Properties... */
}

.box:before {
  background: var(--color);
  /* Other properties... */
}

このシナリオでは、疑似要素 (::before) を .box 要素に追加し、--color CSS 変数を使用するように背景プロパティを設定します。ただし、inherit キーワードを使用して疑似要素に .box の背景色を継承させたい場合は、期待どおりに機能しません。

解決策

継承された値を格納するにはCSS 変数の場合、プロパティのフォールバック値を使用できます。フォールバック値は、var() 関数の 2 番目の引数として指定されます。例:

background: var(--color, inherit);

これを行うことで、--color 変数が定義されていない場合にフォールバック値として継承を使用するように背景プロパティに指示します。

ただし、この場合は、 --color は常に :root レベルで定義されているため、これは機能しません。この問題を解決するには、初期値を使用してカスタム プロパティの定義を解除し、フォールバック値の使用を強制できます。

.box:before {
  background: var(--color, inherit);
  /* Other properties... */
}

/* Undefine --color using the initial value */
.box:before {
  --color: initial;
}

初期値は、CSS 変数を空の初期値に設定します。価値。 CSS 変数に初期値がある場合、var() はそれをフォールバック値を持つものとして扱います。

このアプローチを使用すると、継承された値を --color CSS 変数に保存し、それを CSS 変数に効果的に使用できます。擬似要素の背景プロパティ。

以上が継承された値を CSS 変数に保存するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。