The scripting media query

I know there are a lot more media queries out there than the ones I usually use, but this week I used one I’d never come across before.

The scripting media query checks whether JavaScript is enabled. It has three keywords, although only two of them are useful.

@media (scripting: none) {
    // Javascript is disabled
}

@media (scripting: initial-only) {
    // Javascript is only enabled on page load
}

@media (scripting: enabled) {
    // Javascript is enabled
}

(I know CSS doesn’t use // for comments, but actual comments are grey, which I find a very hard colour to read on a black background).

Interestingly, Tailwind (which was what the project was using) only has the disabled version (with noscript:classHere), which was unhelpful for me. In my case I had a sticky header which shrinks down on scroll. The shrinking can only be done with JavaScript and without shrinking the header is massive. So if JavaScript is disabled we don’t want a sticky header. Which is easier to do in CSS than Tailwind:

@media (scripting: enabled) {
    header {
        position: sticky;
        top: 0;
    }
}

In Tailwind I’d have needed to do:

<header class="sticky top-0 noscript:static">
    Content here
</header>