CSS media query to check for JavaScript support
You can now use CSS to check if JavaScript is supported using the new Scripting media query.
@media (scripting: none) {
.show-for-noscript-users {
display: block;
}
}This example media query would show elements with the class .show-for-noscript-users if JavaScript is disabled in the users browser.
@media (scripting: enabled) {
.show-for-script-users {
display: block;
}
}This example media query would show elements with the class .show-for-script-users if JavaScript is enabled in the users browser.
Possible Values
Possible values are:
enabled– JavaScript is enablednone– JavaScript is not enabledinitial-only– JavaScript is only enabled during the initial page load, not afterwards.
Initial Only?
This one is weird. It means that JavaScript is active during page load, but not afterwards. When would that happen? I can’t think of a case, but Chrome Platform Status mentions that this can never happen in a browser environment. This issue mentions printing environments. My conclusion is: good to know it’s there, probably never going to use it.
Browser support
Support is pretty decent as of January 2023, with Samsung Internet being the only major browser to not support it.
What happens if the browser does not recognize the media query? It will skip the whole block (query), so keep that in mind when using it.
Use cases
Get rid of noscript elements in a flex/grid layout
Traditionally we would use a combination of <noscript> and <style> elements to achieve styling that only applies to noscript environments (JavaScript disabled). However, sometimes an additional <noscript> element can break flex or grid layouts. Using this media query, we can set the display property of the <noscript> element to contents to skip it as a direct flex/grid child.
Demo on CodePen: Grid with a second row of items only for noscript environments (Visit this link with JavaScript disabled to see the second row of the grid)
Progressive Enhancement
According to Progressive Enhancement (PE) approach to building resilient websites, we can use this media query to style things in a certain way if JavaScript is turned off, but enhance the styles with additional rules for when JavaScript it turned on (or vice versa, depending on the use case).
Keep in mind that there are plenty of situations where JavaScript is on, but does not execute, or has not finished executing yet!