detecting there is no javascript

Our first problem is finding out if a user has javascript enabled, which brings us to a rather interesting technique that could be used independent of the whole html5 deal. The trick is to add a .noJS class to the body element of every page. Then, first thing after opening the body tag we insert a little javascript removing this class. If the .noJS class is still present after that, you can be sure the user has javascript disabled. You can now use the .noJS class as a selector prefix for restyling elements when javascript is disabled.

Note that the javascript above "does the trick" and isn't the cleanest or leanest way possible to do this. Also note that this action should be done as quickly as possible, that's why I chose to do it right after opening the body tag. Unobtrusive ways require a longer waiting time and waiting for document loads or other events will most likely cause some graphical glitches as the base css might already be applied while loading the page. Modern browsers are getting quicker, but remember we're also doing this for IE6 users.

The .noJS class can be used for all situations were no-javascript degradation is required, but in this case we only need it to handle IE browsers. That's why we'll create a separate css file for our downgraded design and serve the css through conditional comments. We can use the same conditional comment we created for the html5 shiv javascript file, which is quite nice. You now have all the means to serve javascript-less IE users a downgraded design.

how to be a gentleman

Serving a seriously degraded design is still a pretty drastic decision, and most people will probably fail to understand what has happened to your site. Just put yourself in their place. One day you are visiting a nice looking site, next you know the design went from nice to completely crap (but still usable). It's only fair to inform them why this is happening to them. Sadly, actually doing this in a clean way is not as easy as you might think.

Remember that we are doing this for IE users without javascript enabled. That means you can't use any normal overlays or spotlight effects to draw their attention. Also, I wanted the message to appear only once, namely the first time they visited my site after I switched to html5. Only on their specific demand should they be able to see the message again. It took us a while, but we worked out a solution. Here goes.

being a gentleman

First thing to do is to create an overlay which will be inserted the first time they visit your site after the switch. The .noJS class is extremely useful as you can style the overlay to show by default, effectively hiding the rest of your site. Simply add a specific class to the overlay you'd like to show and apply all styles to .noJS .your-preferred-classname. So now they know.

Of course, once they've read the message in the overlay you shouldn't bother them anymore. Setting a cookie is a good place to start. As long as the cookie is set (from the back-end, no javascript remember), you can make sure the overlay isn't inserted in the html code. So what about people without cookies? A bridge too far you say? Well, maybe, but with the current solution these people will keep getting the overlay for each page, and since they don't have javascript either the only way to reach a new page for them is through an actual page refresh, triggering the overlay again and effectively making your site completely inaccessible.

So we looked a bit further and came to the url referrer. This parameter (accessible in the back-end) will tell you where your user came from before he hit the current page. If your domain isn't in the referrer you can show the overlay, since you know it is the first page on your site he hits. If your domain is in the referrer, you keep the overlay out of the html code. This means that a visitor with javascript and cookies disabled will see the message with each visit, but that's his punishment for being so stubborn I guess. Some quick testing revealed that the referrer was also entered for new tab and new browser hits, which only works to our advantage.

Finally, you can add an additional check on the user client string, filtering out IE users. Another security measure it to delete the overlay with javascript on body load. This way, there's no way it will ever surface in the wrong circumstances. Furthermore, it's a good idea to add a little warning box which can trigger the overlay again at any time, overriding any of the previous conditions. There's always people who might want to read it again. This warning box can be easily hidden for javascript-enabled and non-IE users, using the noJS class.

conclusion

A whole lot of trouble for just a couple of visitors? Maybe, but you can take from this method whatever part you like. There's no shame in dropping the url referrer option, or to simply insert a contextual box for IE/non-javascript users which directs them to a separate page containing the message. This method is merely an exercise in graceful degradation, and trying to be as graceful as possible.

If you want to see it in action, visit my blog with IE and javascript turned off. You can even disable your cookies (and make sure to clear them first) to see the referrer option in action. Again, this method is a bit far-fetched, but it should give you all the means to be as polite about it as possible. If any other measures or workarounds exist, do let me know.