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.