フォールバックで CSS 変数を使用して値を継承するにはどうすればよいですか?

CSS 変数内の値を継承する方法

カスタム プロパティとも呼ばれる CSS 変数を使用すると、プロパティ全体で再利用できる方法で値を保存および操作できます。スタイルシート。ただし、CSS 変数の制限の 1 つは、親要素から値を継承できないことです。

問題

たとえば、次のコードを考えてみましょう:

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

.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);
}

このコードには、デフォルト値 rgba(20, 20, 20, 0.5) を持つ --color 変数を定義する :root ルールがあります。また、長方形要素のいくつかのスタイルを設定する .box クラスと、ボックス内に円形要素を作成する :before 擬似要素もあります。

:before 擬似要素の背景プロパティが設定されています。これは、 --color 変数の値を継承することを意味します。ただし、次の例に示すように、インライン スタイルを使用して各ボックスの --color 変数の値をオーバーライドできます。

<div class="box red">
<p>最初の 2 つのボックスの --color 変数は次のように設定されます。それぞれ rgba(0, 255, 0, 0.5) と rgba(0, 255, 255, 0.5) ですが、3 番目のボックスは親から --color 変数を継承しようとします。 要素。ただし、前述したように、CSS 変数は値を継承できないため、3 番目のボックスの --color 変数はデフォルト値の rgba(20, 20, 20, 0.5) のままになります。</p>
<h3 id="Solution">Solution</h3>
<p>var() 関数は、CSS 変数が定義されていない場合、または初期値に設定されている場合に、CSS 変数のフォールバック値を定義する方法を提供します。次の例に示すように、フォールバック値は var() 関数の 2 番目の引数として指定されます。</p>
<pre class="brush:php;toolbar:false">background: var(--color, inherit);

この例では、--color 変数が定義されていないか、その値に設定されている場合、初期値では、background プロパティは親要素の色を継承します。これはまさにこの場合に必要な動作です。

フォールバック値が追加された更新されたコードは次のとおりです:

:root {
  --color: rgba(25, 25, 25, 0.5); /* Defined as the default value */
}

.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, 0, 255, 0.5);
}

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

これで、3 つのボックスすべてが親の色を継承します。 --color 変数がインライン スタイルで別の値に設定されている場合でも、要素。