I first saw that technique used by Moderinizr, which was a very useful tool back in IE8 days!

https://modernizr.com/

Website is unmaintained, check the Github repo for the lastest version.

https://github.com/Modernizr/Modernizr

There 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.

What's wrong with using modernizer now?

As 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.

There's even a <noscript> tag since HTML 4.01. You can apply CSS to it too.

<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>.

In uMatrix, there is an option "Spoof <noscript> tags when 1st-party scripts are blocked" that shows <noscript> content.

edit: uBlock Origin shows <noscript> when the entire site's JS is disabled.

You 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.

>Of course, if your app breaks because of browser extensions, you should handle errors gracefully

Web developers don't do graceful degredation anymore.

Apps break even without browser extensions. A huge number of websites try to use localStorage, and do not check for errors. (localStorage will raise if the cookie settings for the UA do not permit storing data.)

> 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.

I think you're talking past each other.

To be clear, the noscript tag "disappears" when javascript is enabled in the browser. When javascript is disabled it behaves like any other tag and can be styled accordingly.

Extension can disable scripts selectively but in that case javascript is still considered enabled for the purposes of the noscript tag.

> But the <noscript> tag itself vanishes during document parsing.

This is wrong. In case the browser does not have JS (enabled) its a normal element.

I was indeed wrong about this. I’d grown used to uMatrix’s spoofing, where it does get changed, and misrecollected things. I have now refreshed my understanding from the spec: it’s still a parser feature in that that iff scripting is enabled, it parses its children as raw text (like <script> or the old <xmp>). (And then there’s the user-agent style on it, `display: none !important`, so that you can’t get it to appear whatever you do, unlike most normally-hidden tags like head, title and script.)

I apologise for misleading people.

Yes, you can see it in the dev tools/inspector.

I think this is the most obvious way, no? What approach did you use before?

Simple =/= Obvious.

I've also used something like this for Internet Explorer 10 detection.

Hmm, why bother even having the no-js class, then?

Because you can target it with CSS and apply styles specific for when the document is viewed without JavaScript enabled.

Is 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.

Complicates 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.

most 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.

If javascript isn't running in the browser, the script won't run and the class won't change from no-js to js.

Drupal had this for quite a long time (since Drupal 5 through 8 IIRC), but there was a proposal to remove it.

I 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/

The web is moving on without you.

Edit: Your blog doesn't even use SSL...

The “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”.

Yeah 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.

Sometimes "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!

OT :

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.

http://neverssl.com or http://detectportal.firefox.com/canonical.html

ISPs & WiFi APs can stop trying to attack connections like that, and implement RFC 8910[1].

Otherwise… example.com, maybe. I guess we'll see how long the http version of that lasts.

I assume ISPs will get around to this a few decades after implementing IPv6.

[1]: https://tools.ietf.org/html/rfc8910

You are welcome to use my site: http://krazerlasers.com

You are also welcome to use my html boilerplate:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  <html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <link rel="stylesheet" type="text/css" href="blue-white.css">

"You can't argue with popularity. Well, you could, but you'd be wrong!" - Robbie Williams

Not to bring you down, but to let anyone else know, this isn't novel and has been standard practice for a decade or so.

The 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.

This doesn't check for "module-supporting JS"

> [not] for a decade

Agreed, probably longer. How old is Modernizr?

Well you're wrong because it does check that it supports modules. Go look at it more closely.

> “To let everyone know, this is not novel”

Who asked?

“Not to bring you down, and not adding anything useful here, but...”

It is kind of useful. I'm trained to feel dubious of anything newly invented if the underlying elements of the solution have been there for 2 decades (there must be some reason people didnt do it that way then). If this is existing practice then it sounds right.

No it hasn't

It’s not novel but consider how unproductive your attitude is. Someone was excited about learning something new, and you took a massive dump all over it, with no benefit whatsoever. If you’re upset that not everyone knows everything, you should be working to cultivate that excitement!

https://xkcd.com/1053/