New on the web: How to detect disabled JavaScript in CSS
- 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). ๐
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.
120 | 120 | 120 | 113 | 113 | 17 | 17 | 25.0 | 120 |
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. ๐
Join 5.4k readers and learn something new every week with Web Weekly.