Web Advent Calendar 2024

Detect JS support in CSS

There is a media query for detecting JS support in CSS. You can use the scripting media query to check if JavaScript is supported and enabled in the browser:

@media (scripting: enabled) {
  div.scripting {
    font-weight: bold;
  }
}
@media (scripting: none) {
  div.scripting {
    text-decoration: line-through;
  }
}
Scripting enabled?

But this method has a few shortcomings. As the query says, it just checks if JS is enabled. It stoill matches if your JavaScript cashes because of errors, or is blocked or just not downloaded for any reason. So it might not be practical for everyday use. It still is nice to know.

Source: https://ryanmulligan.dev/blog/detect-js-support-in-css/