MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

The scripting CSS @media media feature can be used to apply styles based on whether scripting (such as JavaScript) is available.

Syntax

The scripting feature is specified as a keyword value chosen from the list below.

none
Scripting is completely unavailable on the current document.
initial-only
Scripting is enabled during the initial page load, but not afterwards.
enabled
Scripting is supported and active on the current document.

Example

HTML

<p class="script-none">You do not have scripting available. :-(</p>
<p class="script-initial-only">Your scripting is only enabled during the initial page load. Weird.</p>
<p class="script-enabled">You have scripting enabled! :-)</p>

CSS

p {
  color: lightgray;
}

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

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

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

Result

Specifications

Specification Status Comment
Media Queries Level 4
The definition of 'scripting' in that specification.
Working Draft Deferred to Media Queries Level 5.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support[1] No support[2] No support No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support No support No support No support

[1] Blink does not implement this feature yet. See Chromium bug #489957.

[2] Gecko does not implement this feature yet. See bug 1166581.

Document Tags and Contributors

 Contributors to this page: mfluehr, Sebastianz, cvrebert, kscarfone
 Last updated by: mfluehr,