13 ms·
I've never thought to do something like this as a way to detect whether or not js is being used. <html lang="en" class="no-js"> ... <script type=
by tsujp 5y ago
I've never thought to do something like this as a way to detect whether or not js is being used.
<html lang="en" class="no-js">
...
<script type="module">
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
</script>
It's so simple but so effective. Will be copying that.
- dan1234 5y agoI first saw that technique used by Moderinizr, which was a very useful tool back in IE8 days! https://modernizr.com/ https://modernizr.com/
- ok123456 5y agoWhat's wrong with using modernizer now?
- frereubu 5y agoAs long as you don't have to deal with IE11, cross-browser support is much better, partially due to fast release cycles. No point including a whole library if all you want to do is detect whether JS is enabled. Edit: To be clear, Modernizr isn't a big library like jQuery and you can specify the thing you want to detect, so you can cut it down, but it's still pointless if you just want to know if JS is enabled or not.
- _-o-_ 5y agoBrowser landscape changed, absolute majority of users are on one of the evergreen browsers with almost identical feature set.
- jojohohanon 5y agoThere was a post on Metafilter highlighting a similar approach to graceful javascripting, back when javascript was a question, not an answer. Basically, serve a page with formatting done via table layout, and then rewrite it with javascript in the client to use more modern layout tools, depending on which features were available on the browser.
- gerardnll 5y agoWebsite is unmaintained, check the Github repo for the lastest version. https://github.com/Modernizr/Modernizr https://github.com/Modernizr/Modernizr
- stedaniels 5y agoNot to bring you down, but to let anyone else know, this isn't novel and has been standard practice for a decade or so.
- elaus 5y agoThe technique as it isn't new of course, but I doubt this specific implementation (checking for module-supporting JS) is standard practice for a decade.
- deleted 5y ago[deleted]
- greggturkington 5y agoThis doesn't check for "module-supporting JS" > [not] for a decade Agreed, probably longer. How old is Modernizr?
- weird-eye-issue 5y agoWell you're wrong because it does check that it supports modules. Go look at it more closely.
- _0o6v 5y agoNo it hasn't
- dt3ft 5y ago> “To let everyone know, this is not novel” Who asked?
- nathell 5y agoI won't. Under my definition, it causes the page to stop being a document and start being an application. Being able to detect JS can be useful sometimes, but, to me, it doesn't belong in a boilerplate. http://blog.danieljanus.pl/2019/10/07/web-of-documents/ http://blog.danieljanus.pl/2019/10/07/web-of-documents/
- weird-eye-issue 5y agoThe web is moving on without you. Edit: Your blog doesn't even use SSL...
- spookthesunset 5y agoThe “documents not applications” battle is like 10 years old at this point. The web moved on a decade ago... I’ve had the “how to deal with folks who disable JavaScript” discussion for well over 10 years and the answer in every shop I’ve worked in has always been the same... don’t bother. And it was the developers themselves making that call, not the “business people”.
- weird-eye-issue 5y agoYeah I was being nice. It moved on so long ago I'm not sure how he calls himself a developer. Okay there... I said it.
- milkey_mouse 5y agoSometimes "the industry" "moves on without" a valuable perspective. That doesn't mean those "left behind" (e.g. Richard Stallman) should give up. Something something "marketplace of ideas." But yeah, GP, get a Let's Encrypt certificate for the sake of your readers!
- nashashmi 5y agoOT : What http site is left we can go to when isp or WiFi greets with a welcome login page. Going to https sites gives an error.
- tiborsaas 5y agoThere's even a <noscript> tag since HTML 4.01. You can apply CSS to it too.
- chrismorgan 5y ago<noscript> is a blunt instrument that isn’t anywhere near as useful as you think it is. <noscript> is pretty much a feature of the HTML parser. It disappears. The DOM representation doesn’t include a <noscript> element, so you can’t style it. (This is also why you can’t use <noscript> in the XML syntax of HTML. If you don’t know about the XML syntax, I’ll simplify and say it roughly means what was commonly called XHTML.) What makes it even less useful is that the absence of the <noscript> content doesn’t mean that your scripts are being executed. If you use something like uMatrix or uBlock Origin to block certain types of scripts, for example, you might find that none of the scripts execute, but that the <noscript> content is also not loaded, because it could have executed some scripts, if the right URLs had been requested. Or perhaps the browser was happy to execute JavaScript, it’s just that it failed to fetch the JavaScript, for whatever reason. (Perhaps you put your JS on a CDN, on a different origin, and it’s down.) In the end, the .no-js approach is far superior to the use of <noscript>.
- tiborsaas 5y agoYou CAN style stuff you put in <noscript>. Of course, if your app breaks because of browser extensions, you should handle errors gracefully, but that goes beyond the no-js classname. I just posted this since I haven't seen it mentioned and it's fairly useful.
- chrismorgan 5y ago> You can apply CSS to it too. I read that as “you can apply CSS to a <noscript> tag”, which is false. Stuff within it, sure. But the <noscript> tag itself vanishes during document parsing. I maintain my position: <noscript> is nowhere near as useful as it first appears, and should seldom be used. I would even suggest that, excluding spiders, user agents that don’t run some or all JavaScript will normally be due to browser extensions. This is a fairly niche area overall, and various extensions are the main factor.
- blauditore 5y agoI think this is the most obvious way, no? What approach did you use before?
- illumanaughty 5y agoSimple =/= Obvious.
- faitswulff 5y agoHmm, why bother even having the no-js class, then?
- Cederfjard 5y agoBecause you can target it with CSS and apply styles specific for when the document is viewed without JavaScript enabled.
- faitswulff 5y agoIs it too much trouble to just override the base style with the js style? As in, don’t specify the base style with “no-js” at all, just the js overrides.
- mikepurvis 5y agoComplicates the base case if you need to undo in it any unwanted styled applied in the no-js case. Conceptually it's a lot easier to manage if they're fully distinct, or at least if the common bits are explicitly common.
- deckard1 5y agomost websites are going to be JS-first. If it makes sense for you to augment your site with JS, then sure knock yourself out and reverse it.
- contradistinct 5y agoIf javascript isn't running in the browser, the script won't run and the class won't change from no-js to js.
- deleted 5y ago[deleted]
- wnevets 5y agoI've also used something like this for Internet Explorer 10 detection.
- Ayesh 5y agoDrupal had this for quite a long time (since Drupal 5 through 8 IIRC), but there was a proposal to remove it.