Newly available Useful when scripting media query helps adapt the interface to user preferences, display capability, or environment conditions.

scripting media query

The scripting CSS media feature can be used to test whether scripting (such as JavaScript) is available.

Note: The detection is done by the browsers based on the user settings. Some browser extensions can implement script blocking using different techniques. In such cases the scripting media feature may not work as expected.

Media queries

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.scripting
120
120
113
17
120
17
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

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;
  }
}

Live demo

scripting: enabled

scripting media query Scripting: enabled demo.

PreviewFullscreen

scripting: none

scripting media query Scripting: none demo.

PreviewFullscreen

scripting: initial-only

scripting media query Scripting: initial-only demo.

PreviewFullscreen

Use cases

  • Adaptive styling

    Use scripting media query to tailor layout or presentation to device features and user settings.

  • Progressive enhancement

    Keep the default experience solid, then layer in device-specific or preference-aware improvements.

Cautions

  • Do not rely on a media condition as the only path to essential functionality.
  • Document the breakpoint or environment strategy so conditions stay consistent across the codebase.

Accessibility

  • Media-query adaptations should preserve keyboard access, reading order, and touch usability.
  • Preference-aware styling should enhance accessibility rather than replace baseline accessible defaults.

Related links