CSS 変数を使用して継承された値を実現するにはどうすればよいですか?

CSS 変数 (別名カスタム プロパティ) 内に継承値を保存する方法?

シナリオ

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

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

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 0, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

このコードでは、--color を使用して .box の背景を制御します。要素の擬似要素。ただし、親の .box 要素から色を継承したい状況が発生する可能性があります。

CSS 変数継承チャレンジ

CSS では、inherit キーワードは値としてサポートされていません。 CSS変数。これは、目的の効果を達成するために --color を継承するように直接設定できないことを意味します。

解決策: フォールバック値と初期値を使用する

この制限を克服するには、次の 2 つの手法を使用できます。

1.フォールバック値の使用:

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

background: var(--color, inherit);

ただし、この場合、 --color は常にルート レベルで定義され、継承されるため、フォールバック値が変更されることはありません。使用済み。

2.初期値の使用:

初期値を使用して --color を「定義解除」し、フォールバック値の使用を強制できます。 CSS 仕様に従って、初期値は空の値であり、var() との特別な相互作用があります。

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

.box {
  ...
  --color: initial;
}

この変更により、CSS 変数内で値の継承を実現できるようになり、親要素の色に基づいて背景色を制御します。

<div class="box red">

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