CSS scripting Media Feature

Definition and Usage

The scripting media feature tests whether client-side scripting (such as JavaScript) is available on the current document.

Use it for progressive enhancement: show JS-enhanced UI when scripting is enabled, and keep usable fallbacks when it is none.

CSS Syntax

Always wrap the feature in parentheses inside @media.

Feature Values

How to Use scripting

Start with usable HTML, then enhance when scripting is enabled.

1. Build a page that works without JavaScript.
2. Use @media (scripting: none) for no-JS messages or static UI.
3. Use @media (scripting: enabled) for JS-dependent chrome (optional polish).
4. Pair with <noscript> when you need HTML content for no-JS users.

Live Preview

Real @media (scripting: …) rules style this sample. Recheck reports what matchMedia returns on this browser.

CSS Examples

Each snippet focuses on scripting. Use Try It Yourself for a live editor.

p {
  color: lightgray;
}

@media (scripting: enabled) {
  .js-on {
    color: green;
  }
}

.no-js {
  display: none;
}

@media (scripting: none) {
  .no-js {
    display: block;
    color: red;
  }
}

p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: green;
  }
}

Key Takeaways