@media (scripting: enabled)

Chris Coyier — Thu, 14 Dec 2023 22:28:59 +0000

Ahmad Shadeed:

Today I learned about the media scripting feature. It’s about detecting JS support via a CSS media query. Soon, we won’t need the .no-js or .js classes once this is widely available. Currently supported in Chrome 120, Firefox 119, Safari 17.
Tweet

@media (scripting: enabled) {
  /* JavaScript is supported */
  :root {
    --js-supported: inline-flex;
  }
}

We used to put a class like no-js on the HTML element:

class="no-js">

Then remove it or swap it out with a line of JavaScript, depending on if you needed to write styles for a situation where a user did or didn’t have JavaScript enabled.

document.documentElement.classList.remove("no-js");

The @media query is now cleaner as it doesn’t require JavaScript, you can do it all in CSS.

Frontend Masters Boost RSS Feed

@media (scripting: enabled)