If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Better than NOSCRIPT

Just one line of JavaScript and a single CSS command will give you a far more powerful alternative to the noscript tag. The noscript tag is a block level tag while this alternative works simply by adding a class to any tag at all.

Note that this is one of the extremely rare exceptions where the JavaScript needs to go in the head of the page rather than at the bottom of the body. In fact it is best embedded directly in the HTML above the link tag that attaches the CSS.

Now all you do is to add class="nojs" to ANY tag in your page that you want removed if JavaScript is enabled.

Apart from being able to use this on inline tags as well as block level tags this also has other benefits over using noscript.

You can add JavaScript tests for specific parts of JavaScript being supported and hide parts of the content only if that specific JavaScript is supported.

You can apply other styling to the page based on whether JavaScript is or isn't available, not just hide content.

Although it should be pretty much the standard solution many people don’t even think about this approach, and therefore I appreciate you posting this. This is the approach to progressive enhancement as I always promote it.

One minor comment, though: You don’t even need to add a class “nojs” to all elements you want hidden if JS is enabled, just address the elements with CSS directly using the “base class” at the HTML element. Given the above pre-condition you could do, for example:

Code:

#someelement {
[styles here]
}
.js #someelement {display: none;}

It’s only hidden if JS is enabled since the “js” class is added with JS so if JS was disabled the class wouldn’t exist in the first place.

By the way: Paul Irish has a different approach where he adds a static “nojs” class into the HTML and removes that class with JS. This is more of a “graceful degradation” approach rather than “progressive enhancement”, though, because it assumes JS to be present by default and non-JS users will only be given minor consideration (if the developer is lazy or ignorant).

I prefer the “add class” method but either way, it’s good that you have mentioned this.

One minor comment, though: You don’t even need to add a class “nojs” to all elements you want hidden if JS is enabled, just address the elements with CSS directly using the “base class” at the HTML element.

I agree. I mentioned adding a class as it is the most direct replacement for noscript.

This approach allows all sorts of distinctions to be made when JavaScript is/isn't available.

For example blue text for those without JavaScript and red text for those where any CSS can be substituted for text colour).

which then allows you to do the same thing based on whether or not the browser supports XMLHttpRequest calls (or the IE4-6 equivalents) in JavaScript to decide what to display or how the page should look.

You could even use both of these (and other feature sensing tests) together in the one page.

which then allows you to do the same thing based on whether or not the browser supports XMLHttpRequest calls (or the IE4-6 equivalents) in JavaScript to decide what to display or how the page should look.

You could even use both of these (and other feature sensing tests) together in the one page.

well, don't get too ambitious; modernizr add dozens of feature classes to the HTML element for stuff like Audio, CSS3, and more, just like you describe. And of course, any of those classes imply JS is available. But thanks for the post, good info all around...

Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

modernizr add dozens of feature classes to the HTML element for stuff like Audio, CSS3, and more, just like you describe.

Why bother with a huge script that adds all of those classes when you can add a much smaller piece of JavaScript that just adds the classes that you actually intend to use - unless you either don't really know how to write JavaScript properly or you actually do intend using a significant fraction of what the script provides.

If you are only going to need two or three classes for specific things then using a script that adds dozens of classes you don't need is inefficient.

Also for those who do decide to use a script such as modernizr (that basically provides lots of classes similar to the two examples I gave) this thread will help to show how it works and how it can be used.