Continuing the discussion from Need help creating a table for a WP post:
Hi, Norman. You may have overlooked the behavior of your page if JavaScript is not enabled. You have duplicate images within <noscript> tags. Since the initial image is still visible without JavaScript, the dupe image within <noscript> tags adds an extra copy. See the screen shot…
It looks to me like you do not need the content within the <noscript> tags. What do you think?
Is <noscript> still the way to handle alternative content for if JavaScript is switched off?
Thank you a lot for this hint, ronpat. I sincerely didn’t know that.
I don’t think it is due to WordPress, so I checked it a little bit and I can confirm it’s due to this plugin: Speed Booster Pack (https://it.wordpress.org/plugins/speed-booster-pack/). It has the lazy-load function for all the images in WP… and if I disable it the problem is no more there. Now it is disabled. Can you please confirm it?
Thank you one more time, I probably would have never noticed it by myself! 
The page looks normal now . No duplicate content.
Nicely done!
I don’t know if it’s the best way or not, but it is included in the specs for HTML 5 for the purpose of displaying content if JS is not available.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
Fair do’s!
No because that only works or detecting no JavaScript at all. there are at lest a dozen further levels of JavaScript supported or not that noscript can’t handle.
The modern replacement is one line of CSS.
.js noscript {displaynone;}
and one JavaScript if statement in the head of the page - for example:
if (Array.prototype.forEach) document.getElementsByTagName('html')[0].className += ' js';
You simply substitute a reference to a part of JavaScript that your script needs to run as the if condition (in this example the script needs ES5 array methods) and all browsers that don’t support it are then considered to not support JavaScript and so anything with class=“noscript” will be visible for those visitors whose JavaScript doesn’t support that command and not visible for those whose browsers do support it.
For completeness you should also provide the same test around all of the scripts at the bottom of the page and only allow them to run if the command is supported. That way the script will not crash through trying to run an unsupported JavaScript command.
JavaScript now has as many levels of noscript as there are possible combinations of commands that some browsers don’t support. The noscript tag only supports one of those and one that is only really applicable to browsers that predate Netscape 2 and IE3.
Thanks @felgall. I had a feeling there was more to it these days, but I had no idea it was this complicated! 
It doesn’t have to be. In all fairness, you were right about the use of <noscript> - it will let you display alternate content in situations where the client does not support JS (or JS has been disabled). Sometimes this sort of all-or-nothing detection is what you want.
As felgall points out, in situations where JS is available it can still be wise to check if a specific feature you want to use is available. A useful site is http://caniuse.com/ which will allow you to check which browsers support a given feature, although this is geared more towards browser APIs (such as the geolocation API) than language features.
You can also use a library such as Modernizr, which provides a simple API for feature checking:
if (Modernizr.awesomeNewFeature) {
showOffAwesomeNewFeature();
} else {
getTheOldLameExperience();
}
Modernizr includes tests to check for ES5 (and ES6) feature support within browsers.
Off Topic
If you use http://www.cynthiasays.com/Home.aspx to check your page for accessibility issues, it will show an error if you use the <script> tag without an associated <noscript>. However, the actual W3C guidelines to which it refers only state that the use of noscript is one way to fulfil the guidelines, not the only way.
Only if your JavaScript code is supported by ALL browsers that are currently still used by anyone or you don’t care that your script tries to run in browsers that don’t understand it rather than simply treating that browser the same as for noscript. More likely the ALL or NOTHING you want will be when a certain level of JavaScript is supported by the browser and you will not want your script to try to run in Netscape 2. Netscape 2 no .longer supports JavaScript but will still try to run your code instead of displaying the noscript content that ought ought to be displaying today
Anyway, it is only one line of CSS and one line of JavaScript in the head needed to replace the noscript tag with a noscript class where you determine what the minimum level of JavaScript support is in order to consider that the browser supports JavaScript.
Also modernizr is just a more advanced version of the noscript replacement for when you want to have multiple versions of the page depending on which combination of JavaScript features the browser supports.
[post deleted]
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.