You do not have scripting available.
Your scripting is only enabled during the initial page load. Weird.
You have scripting enabled!
```
The CSS does two things.
1. It hides the paragraphs
2. It reveals the paragraph that matches the status of the scripting media query
The possible values of the scripting media query are:
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.
We write separate media queries for each of the possible status values. It is not possible to one statement that covers all three.
```css
p {
display: none;
}
@media (scripting: none) {
.script-none {
display: block;
color: red;
}
}
@media (scripting: initial-only) {
.script-initial-only {
display: block;
color: red;
}
}
@media (scripting: enabled) {
.script-enabled {
display: block;
color: red;
}
}
```
In a production application, we may want to give the user visual cues about the status of Javascript.
This media query is not a replacement for `noscript` elements on your page. CSS is for visual styles and should not be relied upon for behavioral uses.
