Published at
Updated at
Reading time
3min

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.

Keep in mind that disabled JavaScript is not the primary reason why applications break. As the friends at GOV.UK rightfully say there are plenty of reasons why JavaScript fails. A browser extension could block it, the visitor might be on a flaky network, there could be a DNS issue, ... the possibilities are endless.

That's why progressive enhancement should be at the core of your web development.

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). ๐ŸŽ‰

This blog reacting to disabled JavaScript via the "scripting" media feature.

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
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
120120120113113171725.0120

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 or rely on the no-js trick to detect broken JS.

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. ๐ŸŽ‰

If you enjoyed this article...

Join 5.2k readers and learn something new every week with Web Weekly.

Web Weekly โ€” Your friendly Web Dev newsletter
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles