noscript is Obsolete

The noscript tag was the only way that you could include content in early Netscape browsers that was displayed only when JavaScript was not available. The need for that tag died at the same time as Netscape 4 did. Unfortunately there are many people writing web pages who copy what has come before and what they are copying was written to work with Netscape 4 or earlier browsers. They therefore end up with far more complicated HTML than they need to.

The problem is that noscript is a block level tag and so you need to wrap it around entire blocks of content. If you only need to change a small part of the wording of a paragraph then you need to repeat the entire paragraph - once inside the noscript tag and again in the JavaScript to add it into the page in place of the noscript.

With HTML 5 the restriction on noscript tags only being allowed in the body of the page (where they are completely useless) has been removed and they can now be used in the head of the page as well. This was done to allow you to incorporate an alternative stylesheet to style your page differently depending on whether JavaScript is or isn't enabled. This change would have been useful for Netscape 4 and earlier (if those browsers had supported stylesheets) but is completely pointless today as you don't need a separate stylesheet to handle displaying things differently depending on whether JavaScript is enabled or not, you can do it all in one stylesheet by using one line of JavaScript.

The below example illustrates two of the effects that can be achieved using a single stylesheet containing styles for both when JavaScript is enabled and for when it isn't where the test for whether JavaScript is enabled or not is done by including one line of JavaScript above the stylesheet. This one line of JavaScript adds an extra class to the html tag when it is able to run. You can therefore simply set up your styles for when this class isn't there to define how the page should look when JavaScript is not enabled and override those styles with ones that test for when that class is there to set the appearance for when JavaScript is enabled.

Example Page

In this example the "js" class is added to the HTML tag to indicate that JavaScript is enabled.

The "nojs" class replaces the noscript tag in the body of our page. Any content inside that class will only display when JavaScript is not available. This class is better than the noscript tag because its use is not restricted to entire blocks. It works on an entire block only when it is attached to a block level tag. If we attach it to an inline tag (such as span) then it will work for that inline content - something that the noscript tag can't do. So we are already better off using this approach but there's much more this approach provides that noscript can't do.

The "jsi" and "jsb" classes define inline and block content that is only to be displayed when JavaScript is enabled. These two classes provide us with the equivalent of the opposite of a noscript tag (in the case of "jsb") and also the equivalent of the opposite of what noscript would be able to do if it were an inline tag instead of a block tag. By using these two classes along with the "nojs" class we can define exactly what content we want to have appear in the page depending on whether JavaScript is enabled or not entirely within the HTML without needing to add the JavaScript version from JavaScript.

That isn't all though, this approach doesn't just allow us to change the content of the page, we can also apply any style that the browser supports in different ways depending on whether JavaScript is enabled or not. In this example we illustrate this by applying a different background colour to the page depending on whether JavaScript is enabled or not. This does away with the need for the noscript tag and a separate stylesheet in the head of the page in HTML 5 and will work even with HTML 4 where placing noscript tags in the head is invalid.

Even this isn't all that can be achieved with this approach. If we add JavaScript to test if the browser supports a specific JavaScript feature (eg. ajax or localStorage) then we can add additional classes to the html tag to indicate whether or not any particular JavaScript command is supported and style the page differently based on that.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow