4 ms·

Sad if true that <noscript> is obscure these days - sort of tempting to put some special easter egg in one just to see if anyone can see it.

MrVandemar 5y ago
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.
aluminum96 5y ago
The problem is that there are so many SPAs now, it's just a totally broken experience to turn off JS.
wolfgang42 5y ago
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.
- thrashh 5y ago
  That’s true but I always had 3 levels: - noscript - js failed to init - app loaded I’m very big on graceful failure though because it builds systems that you can really trust.
jlokier 5y ago
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 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.

MrVandemar 5y ago

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.

aluminum96 5y ago

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

wolfgang42 5y ago

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.

thrashh 5y ago
That’s true but I always had 3 levels: - noscript - js failed to init - app loaded I’m very big on graceful failure though because it builds systems that you can really trust.

jlokier 5y ago

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