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

CSS 変数の値の継承

CSS の領域では、CSS 変数とも呼ばれるカスタム プロパティは、非常に高い柔軟性と制御を提供します。スタイル。継承された値を変数内に格納したい場合、よくある質問が生じます。解決策を見ていきましょう。

課題

次のコードを考えてみましょう。

:root {
  --color:rgba(20,20,20,0.5);
}

.box {
  --color: inherit;
  background: var(--color);
}

ここでは、背景に:root 要素からの色。ただし、 --color の値として継承を使用することは、継承ルールにより機能しません。

解決策: フォールバック値と初期キーワード

継承された値を保存するにはでは、CSS 変数のフォールバック値機能を活用できます。

background: var(--color, inherit);

これは、 --color が定義されていない場合は継承を使用するようにブラウザに指示します。ただし、 --color は常に :root レベルで定義されるため、フォールバックは使用されません。

これに対処するには、initial キーワードを使用して --color を初期値にリセットします。

.box {
  --color: initial;
  background: var(--color, inherit);
}

initial を使用すると、カスタム プロパティの設定が効果的に解除され、継承が有効になります。このコードは、:root 要素から色を正常に継承します。

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