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 enabled
• none – JavaScript is not enabled
• initial-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!

Futher reading

Scripting Media Query on MDN

Scripting at Can I Use