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>