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>
Top comments (0)