scripting media query

概要

JavaScriptが有効か無効かをCSSから検出できる。scripting: none ではJS無効時のフォールバックUIを、scripting: enabled ではJS前提のUIを定義できる。プログレッシブエンハンスメントの実装に有用で、<noscript> タグのCSS版とも言える。

対応ブラウザ

基本構文

/* JS無効時にフォールバックUIを表示 */
@media (scripting: none) {
  .js-only {
    display: none;
  }
  .no-js-fallback {
    display: block;
  }
}

/* JS有効時のみ表示 */
@media (scripting: enabled) {
  .interactive-widget {
    display: block;
  }
}

実務での使いどころ

• JS無効時のフォールバック

  JavaScriptが無効な環境でも最低限のUIを提供するプログレッシブエンハンスメントを実現する。

• 動的コンポーネントの出し分け

  JSが利用できる場合のみインタラクティブなウィジェットを表示し、無効時は静的な代替を表示する。

注意点

アクセシビリティ

• JS無効環境でもコンテンツにアクセスできるフォールバックを提供することで、アクセシビリティが向上する。

参考リンク

• MDN Web Docs — scripting
• Can I use — scripting media query