3 ms·
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
by 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.