New on the web: How to detect disabled JavaScript in CSS (#blogPost)

How many people actively disable JavaScript in their browsers? I couldn't find any recent stats to answer this question, but if my memory doesn't fail me, it's only a tiny fraction of the overall web traffic (below 1%).

And that's no surprise. Have you tried using the web without JS? If so, I doubt you've come very far. JavaScript drives everything from small widgets and form validation to full-fledged all-in JS sites.

But still, if you want to be a good web citizen, you should inform people that your site requires enabled scripting. How can you do this?

You can use the noscript element.

<noscript>
  <h1>This page requires JavaScript</h1>
</noscript>

The noscript element works fine but, unfortunately, is an HTML-only solution. You can't adjust your styles when JavaScript is disabled. But how could you detect if scripts run in CSS?

To detect if JavaScript is enabled, you can deliver your HTML with a no-js class that will be removed via JavaScript. When your JS runs, you can then style your page depending on the existing or removed no-js class.

This approach always felt hacky to me, though. And there's news! Today I learned about the Media Queries Level 5 spec that defines a scripting media feature.

/* 
  The user agent will not run scripts for this document.
*/
@media (scripting: none) {
  body {
    /* ... */
  }
}

/*  
  The user agent supports scripting of the page 
  and it's enabled during the initial page load.
  Examples are printed pages, or pre-rendering network proxies.
*/
@media (scripting: initial-only) {
  body {
    /* ... */
  }
}

/* 
  The user agent supports scripting of the page
  and it's enabled for the lifetime of the document.
*/
@media (scripting: enabled) {
  body {
    /* ... */
  }
}

The scripting media feature just entered the first browser — Firefox Nightly (113). 🎉

What about the other browsers?

It's early times for @media (scripting: none), but you will find up-to-date browser support information in the table below.

MDN Compat Data (source)

Browser support info for scripting media feature

Nein	Nein	Nö	113	113	Nope	Nope	Non	Non

If you plan on using @media (scripting: none), remember that it only detects whether JavaScript is enabled/disabled. It doesn't tell you if requests failed or you're application blew up. You should still build your sites with progressive enhancement in mind to guarantee a good experience for all situations.

In summary, this new web addition is not the most ground-breaking feature, but still, I appreciate everything that streamlines web development and helps us to build sites that respect user preferences!

Yay for the web! Even though it'll be only visible to the 1% of folks browsing the web without JS. 🎉