CSSだけでスクリプトの有効・無効に合わせてスタイルを設定する

CSSだけでJavaScriptなどのスクリプトの有効・無効に合わせてスタイルを設定するには@mediaのscripting特性を使用します。

@mediaのscripting特性とは

@mediaのscripting特性はW3C Working Draft の Media Queries Level 5となり、Firefox Nightly 113で追加になりました。

構文

scripting特性のキーワードにはnone initial-only enabledがあります。

• none ... スクリプトが利用できない状態で有効です。

@media (scripting: none) {
  body {
    /* ... */
  }
}

• initial-only ... スクリプトが利用できる状態のページロード時に有効です。

例として、CSSだけでページロードの間だけローディング要素を表示し、ページロードが完了したら非表示にします。 これによりJavaScriptでローディング要素の表示・非表示を切り替える必要がなくなります。

※ ページロード完了のタイミングはloadイベント発生のタイミングとなります。 HTMLの読み込みが完了した時点で発生するDOMContentLoadedイベントのタイミングや非同期や遅延読み込み完了のタイミングとは異なります。

<div class="loading"><img src="loading_image.webp" alt="" width="100" height="100" class="loading-image"></div>

.loading {
    display: none;
}

@media (scripting: initial-only) {
  .loading {
      display: block;
  }
}

• enabled ... スクリプトが利用できる状態で有効です。

JavaScriptが有効の場合にだけスタイルを適用したい時に、スクリプトが読み込まれたらJavaScriptで有効・無効判断用のクラスやデータ属性を付与する処理が不要になります。

@media (scripting: enabled) {
  body {
    /* ... */
  }
}

おわりに

ユーザーが意図してJavaScriptを無効にしてブラウザを使用しているケースはごく一部だと思います。 しかし、意図せずスクリプトが動かない状況になる原因はGOV.UKで紹介されているように多分に潜んでいます。 また、ユーザーエージェントの中にはスクリプト単位やドメイン単位でスクリプトサポートの有効・無効を切り替える機能も存在します。 このことから@mediaのscripting特性は将来的に特定のスクリプトを検知し、そのスクリプトが利用できる状態で有効とするかどうかを設定できるようにすることが検討されているようです（NOTE: A future level of CSS may extend this media feature to allow fine-grained detection of which script is allowed to run.）。

どのような状況でもユーザーに必要な情報を伝えられるように、今回ご紹介した@mediaのscripting特性のサポート状況に注意しつつうまく活用していきたいですね。