Newly available 主要ブラウザで対応が進んでいるが、段階的強化として使用するのが安全。

scripting media query

scripting は CSS のメディア特性で、 (JavaScript などの) スクリプトが利用できるかどうかを調べるために使用することができます。

メモ: 検出は、ユーザーの設定に基づいてブラウザーによって行われます。一部のブラウザー拡張機能は、さまざまな手法を使用してスクリプトのブロックを実装しています。そのような場合、 scripting メディア機能は期待どおりに動作しない場合があります。

メディアクエリ機能検出

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.scripting
120
120
113
17
120
17
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
/* Display fallback UI when JS is disabled */
@media (scripting: none) {
  .js-only {
    display: none;
  }
  .no-js-fallback {
    display: block;
  }
}

/* Display only when JavaScript is enabled */
@media (scripting: enabled) {
  .interactive-widget {
    display: block;
  }
}

ライブデモ

scripting: enabled

scripting media query Scripting: enabled demo.

プレビュー全画面表示

scripting: none

scripting media query Scripting: none demo.

プレビュー全画面表示

scripting: initial-only

scripting media query Scripting: initial-only demo.

プレビュー全画面表示

実務での使いどころ

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

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

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

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

注意点

  • ブラウザ拡張によるJS無効化など、検出が意図通りに動作しないエッジケースがある。

アクセシビリティ

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

参考リンク