CSSの変数（カスタムプロパティ）が期待通りに動作しないときの解決方法

Post on:2021年9月2日

CSSの変数（カスタムプロパティ）が期待通りに動作しない！

最近、私を含めて多くの人がCSSの変数（カスタムプロパティ）が期待通りに動作しないで混乱しているのを目の当たりにしたので、ここに書き留めておきます。

まずは、CSSの変数を定義します。

html {
  --color-1: red;
  --color-2: blue;
}

html {

--color-1: red;

--color-2: blue;

}

これら2つの変数を背景のグラデーションに使用します。

html {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}

html {

--color-1: red;

--color-2: blue;

--bg: linear-gradient(to right, var(--color-1), var(--color-2));

}

ページ上には、いくつかのdivがあるとします。

<div></div>
<div class="variation"></div>

1 2	<div></div> <div class="variation"></div>

divに背景のグラデーションを適用してみましょう。

div {
  background: var(--bg);
}

div {

background: var(--bg);

}

もちろん、これは完全に機能します！

では、せっかく変数を使用しているので、バリエーションを作成してみましょう。レッドからブルーではなく、グリーンからブルーにしてみます。つまり、redをgreenにアップデートします。

html {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}
div {
  background: var(--bg);
}
.variation {
  --color-1: green;
}

html {

--color-1: red;

--color-2: blue;

--bg: linear-gradient(to right, var(--color-1), var(--color-2));

}

div {

background: var(--bg);

}

.variation {

--color-1: green;

}

うまくいきません！
サイレンが鳴り響き、クラクションが鳴り響き、家畜が身を隠します。

この実装は、期待通りに動作しません。

私が理解している限りでは、問題は--bgがどちらのdivにも宣言されていないことです。より上位で宣言されていたので、--bgを使用することはできましたが、そこで使用されるまでにその値はロックされます。宣言された時点で--bgがたまたま使用していた他のプロパティを変更したからといって、そのプロパティが使用された場所を探しにいき、依存関係として使用されたすべてのものをアップデートすることにはなりません。

この説明ではピンとこないかもしれません。しかし、これが私が得た精一杯の答えです。

解決策ですか？
いくつかあります。

解決方法 1: 変数を使用する場所にスコープを設定する

このようにすることができます。

html {
  --color-1: red;
  --color-2: blue;
}

div {
  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
  background: var(--bg);
}
.variant {
  --color-1: green;
}

html {

--color-1: red;

--color-2: blue;

}

div {

--bg: linear-gradient(to right, var(--color-1), var(--color-2));

background: var(--bg);

}

.variant {

--color-1: green;

}

--bgが両方のdivで宣言されているので、--color-1の依存関係への変更は機能します。

解決方法 2: 変数を設定するセレクタをカンマ区切りにする

一般的に変数は:rootで定義されます。しかし、その場合今回のような問題が発生します。変数を宣言する時に適用するセレクタを追加するだけで、正しいスコープに入るようになります。

html,
div {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}
div {
  background: var(--bg);
}
.variation {
  --color-1: green;
}

html,

div {

--color-1: red;

--color-2: blue;

--bg: linear-gradient(to right, var(--color-1), var(--color-2));

}

div {

background: var(--bg);

}

.variation {

--color-1: green;

}

他の例を挙げると、下記のようになります。

:root, 
.button,
.whatever-it-is-a-bandaid {
  --padding-inline: 1rem;
  --padding-block: 1rem;
  --padding: var(--padding-block) var(--padding-inline);
}

.button {
  padding: var(--padding);
}
.button.less-wide {
  --padding-inline: 0.5rem;
}

:root,

.button,

.whatever-it-is-a-bandaid {

--padding-inline: 1rem;

--padding-block: 1rem;

--padding: var(--padding-block) var(--padding-inline);

}

.button {

padding: var(--padding);

}

.button.less-wide {

--padding-inline: 0.5rem;

}

解決方法 3: ブランケットモード

この方法は、変数をどこにでも入れることができます。

* {
  --access: me;
  --whereever: you;
  --want: to;

  --hogwild: var(--access) var(--whereever);
}

* {

--access: me;

--whereever: you;

--want: to;

--hogwild: var(--access) var(--whereever);

}

ただし、これは良い解決策ではありません。
私は最近、中規模サイトで500msのレンダリング遅延が発生したのを見かけました。これはページの描画ごとにすべてのプロパティを計算する必要があるからです。

期待通りに機能はしますが、セレクタが原因でパフォーマンス上の問題を引き起こす可能性がある稀なケースの一つです。

解決方法 4: 新しいデフォルトのプロパティとフォールバックの導入

この問題を最初に目にしたのは、Stephen Shawの功績のおかげです。

この問題の最初のCSSに戻りましょう。

html {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}

html {

--color-1: red;

--color-2: blue;

--bg: linear-gradient(to right, var(--color-1), var(--color-2));

}

やりたいことは、2つです。

背景全体を上書きする方法
グラデーションの背景の一部を上書きする方法

そのためには、下記のような方法があります。

html {
  --color-1: red;
  --color-2: blue;
}
div {
  --bg-default: linear-gradient(to right, var(--color-1), var(--color-2));
  background: var(--bg, var(--bg-default));
}