カスタムプロパティのフォールバックトリックを使ったTIPS

カスタムプロパティのフォールバックトリックを使った、知っているとちょっと便利かもしれないTIPSをご紹介します。

カスタムプロパティのフォールバックとは

参照したカスタムプロパティが宣言されていなかったり、 無効になってしまった時を考慮して設定することができる値のことです。 カスタムプロパティの初期値としても考えられます。

以下の例は、--colorが無効だった場合はgreenが適用されます。

.hoge {
  color: var(--color, green);
}

ご紹介するフォールバックトリックとは、 このフォールバックの仕組みを使ったハック的な実装のことになります。

便利な点

カスタムプロパティの書き換えで、簡易的なif文のように使えるところです。

注意

あまり浸透しているとは言えない実装になりますので、 多用は避けて効果が見込める箇所に限っての利用を強く推奨します。

閑話休題

カスタムプロパティのより良い命名規則をご紹介します。 ローカルなカスタムプロパティは、_から始まるように宣言することでスコープの範囲が明確になります。

.hoge {
  --_color: green;

  color: var(--_color);
}

実装について

この記事では、フォールバックトリックが効果的に利用できる、:hoverでの実装をご紹介します。 他にもテーマ切り替えの実装で効果的に利用できそうですので、 こちらは後日に記事にしてみたいと思います。

方針

:hoverでグローバルに利用したいため、:root要素にカスタムプロパティとして宣言します。 後に然るべきところで値をセットして上書きしていきます。

カスタムプロパティの定義

最初にスタムプロパティの定義をします。実装の肝となる部分です。

:root {
  --hover-on: ;
  --hover-off: initial;
}

2.2. Guaranteed-Invalid Values によると、カスタムプロパティにおける空文字は有効な値であり、 initialを使うことで無効保証値と呼ばれる値にできるそうです。

このトリックについて理解するためには、無効保証値とその性質を利用したテクニックを知る必要があります。

無効保証値について

CSSのカスタムプロパティの値が計算時に無効であることを保証します。 以下のような性質があるようです。

カスタム・プロパティの値が無効保証値である場合、var() 関数はそれを置換に使用することはできません。そうしようとすると、有効なフォールバックが指定されていない限り、計算値の時点でその宣言は無効になります。

MDN Guaranteed-invalid valueから引用

無効保証値の性質を利用したテクニック

海外では The Guaranteed-Invalid Value Hack として知られているようです。 カスタムプロパティにinitialを設定して、var()にフォールバック値を使用させるテクニックを指します。

initialを指定する理由は、開発者が意図的に無効保証値としたい場合にするものです。 JavaScriptにも変数の宣言時にnullを代入して初期化するテクニックがあります。 この方法もそれと同様に、

• 値の代入を待機する状態
• 変数の意図を明示化

という思想があるのではないかと推測します。

:hoverの実装

具体的な実装に入っていきます。 後にブラッシュアップを行いますが、全体としては以下のような実装になります。

:root {
  --hover-on: ;
  --hover-off: initial;
}

:any-link {
  color: var(--hover-off, blue) var(--hover-on, green);

  &:hover {
    --hover-off: ;
    --hover-on: initial;
  }
}

通常時では、--hover-onが空文字であり、--hover-offがinitialのため、 以下のように解釈されます。

:any-link {
  --hover-on: ;
  --hover-off: initial;

  color: var(--hover-off, blue) ;
}

ホバー時では、--hover-offが空文字であり、--hover-onがinitialのため、 以下のように解釈されます。

:any-link:hover {
  --hover-on: initial;
  --hover-off: ;

  color:  var(--hover-on, green);
}

よく見てもらうと気づかれるかと思いますが、var()の前後に空白が含まれています。 この部分が空文字を指定したカスタムプロパティの出力になります。

空白のためプロパティの値としては機能せず、 initialを指定したカスタムプロパティのフォールバック値が有効になります。

ブラッシュアップ

コードのブラッシュアップを行います。 @media (any-hover: hover)を使用してポインターデバイスに:hoverのスタイルを 適用し、タッチデバイスやキーボード操作に:focus-visibleでスタイルを適用します。

ベースになるCSSに記述する内容となりますので、:whereを使って詳細度を0に保ち、 後のCSSで上書きしやすくすると良いかと思います。

:where(:root) {
  --hover-on: ;
  --hover-off: initial;
}

:where(:any-link) {
  --_color: var(--hover-on, green) var(--hover-off, blue);

  color: var(--_color);

  &:focus-visible {
    --hover-on: initial;
    --hover-off: ;
  }

  @media (any-hover: hover) {
    &:hover {
      --hover-on: initial;
      --hover-off: ;
    }
  }
}

おわりに

知っていると便利に使える状況がある一方で、 浸透しているとは言えないハック的な実装なので多様は厳禁です。 以上になります。