Obscure HTML Tags

I browse with as little javascript as I can get away with and I'm sorely tempted to wrap my entire site content in <noscript> tags.

The problem is that there are so many SPAs now, it's just a totally broken experience to turn off JS.

My experience has been that <noscript> is too unreliable to be usable: the problem is that a lot of users browsing "with JavaScript turned off" are actually browsing with it turned on but not executing (some arbitrary subset of!) the <script> tags on the page.

The way to achieve the same effect without this problem is to include the nojs content unconditionally, and then have your script delete it from the DOM somewhere far enough through execution that you're confident that your script and its dependencies are all running properly. Otherwise you end up in situations where the JS is broken because something is being blocked, but it's working just well enough that the browser isn't showing the nice message you wrote explaining what the problem is.

As wolfgang42 says, these days it's common for JS to be disabled by user preference but <noscript> elements are not displayed. Sometimes only a subset of JS is disabled. <noscript> is really for browsers that don't support JS at all.

A simple alternative if you want to display something to users who have JS entirely disabled (i.e. not partially) is to use a CSS class 'nojs' and inline <script> very early in the file. If you're happy to assume a HTML5 browser:

  <script>document.write("<style>.nojs{display:none}</style>")</script>

and if not:

  <script type="text/javascript">document.write("<style type='text/css'>.nojs{display:none}</style>")</script>

If running on a browser that doesn't support CSS or JS, this will display the 'nojs' content, which is probably what you want. You can of course use this method without <script> to provide a 'nocss' class that will display on CSS-incapable browsers.

I prefer this over the method of deleting a DOM node after everything has been loaded and parsed, because this inline script is guaranteed to take effect before the 'nojs' content is reached so it's impossible for the 'nojs' content to be temporarily flashed to users on a slow connection (https://en.wikipedia.org/wiki/Flash_of_unstyled_content). It's also a bit more versatile (you can place the 'nojs' anywhere, use it for alternative form elements etc.), and it's short.

If you want to do something more like progressive enhancement, where the default is to not show something fancy unless JS loads successfully, add a 'js' class, where an inline <style> sets display:none, followed by JS which overrides the inline style to make 'js' elements visible again. Similarly with elements you want to display (or not) depending on specific feature detections.

Why not? They'd be impressed and you can charge more.

I'm being using <dialog> for a few years, and I don't find any problems. Except for requiring a polyfill for Firefox (and this will be not necessary anymore).

Citation/details? I just used it for the first time today... :)

Actually <nextid> is.