CSS のスペーストグルってなんだ？

小原一哉

この記事を読んでいて

スペーストグルを使用する

と出てきて知らなかったので調べる。

小原一哉

上記の記事にもリンクがある

にミニマルなテクニックの部分の説明がある。これだけだと背景の知識がないと理解できないので CSS Variables 周りの仕様を調べる必要がある。

小原一哉

MDN に載ってる CSS カスタムプロパティの基本的な説明。
(これまで CSS Variables と読んでいたけどカスタムプロパティか変数と言ったほうがいいかも)

var() 関数を使用して、指定された変数が定義されていない場合の代替値を複数定義することができます。

まあこれはいつも使っているやつなので馴染みある。

メモ: 代替値の構文は、カスタムプロパティの場合のように、カンマを使用することができます。例えば、 var(--foo, red, blue) は red, blue という代替値を定義します。最初のカンマから関数の終わりまでが代替値とみなされます。

本筋ではないけどだけどこれは知らんかった…。

小原一哉

If, for whatever reason, one wants to manually reset a variable to the guaranteed-invalid value, using the keyword initial will do this.

initial という値を使うとカスタムプロパティを定義していない状態と同じにできるらしい。へー。罠じゃね？

小原一哉

To substitute a var() in a property's value:

If the custom property named by the first argument to the var() function is animation-tainted, and the var() function is being used in a property that is not animatable, treat the custom property as having its initial value for the rest of this algorithm.

If the value of the custom property named by the first argument to the var() function is anything but the initial value, replace the var() function by the value of the corresponding custom property.

Otherwise, if the var() function has a fallback value as its second argument, replace the var() function by the fallback value. If there are any var() references in the fallback, substitute them as well.

Otherwise, the property containing the var() function is invalid at computed-value time.

NOTE: Other things can also make a property invalid at computed-value time.

カスタムプロパティが未定義で var() のフォールバック値もない場合、1,2,3 に当てはまらず 4 になるのでプロパティが計算値の時点で無効になるらしい。

つまり未定義のカスタムプロパティを使おうと

.a {
  background: var(--undef-var);
}

と書くと、何も指定していないのと一緒になる。

小原一哉

改めてスペーストグルのテクニックを読んでみると

  --toggler: ;
  --red-if-toggler: var(--toggler) red;
  background: var(--red-if-toggler, green); /* will be red! */

は --toggle が定義されているので、--red-if-toggler も red と定義されることになり background: red となり、一方で

  --toggler: initial;
  --red-if-toggler: var(--toggler) red;
  background: var(--red-if-toggler, green); /* will be green! */

は --toggle が initial = 定義されていないので、--red-if-toggler というプロパティは無効 → 定義されていないことになり、background: green というフォールバック値になる。

わかった。