A simple IE6 upgrade script

How to create an IE6 upgrade notice using conditional stylesheets and a little javascript.

I’m sure most designers and developers have had enough of Internet Explorer 6 and the various problems associated with having to develop websites that not only work in more up to date browsers but offer support and fixes purely for IE6.

Please note this article and script are now quite old and while you’re welcome to use the script, I would recommend having a look around for a more up to date alternative as there are lots out there now. You might also want to read about what effect a noficiation bar actually has.

This article provides shows you how, with the use of a stylesheet switcher script and a little conditional CSS, you can show IE6 users a message and allow them to hide it if they can’t, or don’t want to upgrade their browser rather than forcing them to see a message telling them something they can’t do anything about.

To force or to advise?

There are a growing number of companies and designers who have reached the point where they no longer offer default support for IE6. One very prominent example recently has seen 37Signals phasing phase out support for IE6 on their products. There are plenty of other sites and companies who no longer offer IE6 compatability as part of their standard service and many who now charge extra.

It’s worth noting that despite all its flaws, IE6 still commands a large share of the browser market and as such, a more gentle approach really might be better than simply stopping developing working sites for IE6.

A simple adivisory notice will suffice

It occured to me recently that perhaps a nice compromise would be to combine the style switcher written by Paul Sowden with a little conditional CSS to display a notice in IE6 but that offers the user the chance to close it and keep it closed by using a simple cookie to switch to a stylesheet that hides rather than displays the notice.

This way, you’ve done your duty in advising the IE6 user that there are better, safer and more up to date options for browsing the web but you’ve also provided them with a simple fallback of dismissing the message if they don’t want to or can’t upgrade. It’s a little more subtle than a hulking great message appearing on every page because if they don’t want to update their browser, viewing your site with a constant message about upgrading will be one way to lose a visitor.

View the demo

Writing tutorials really isn’t my strong point so I’d suggest that as the people who will use this script are going to know what I’m talking about, you should just view the IE6 soft upgrade notice demo and if you want to pick it apart, you can download all the relevant files here.

How it works

1. HTML page contains conditional call to two stylesheets – the default stylesheet shows the notice in IE6 the alternative stylesheet hides it.

2. The javascript link in the message displayed in IE6 swaps stylesheets from the one showing the message to one that hides it. At the same time, to avoid it showing the message on the next page a visitor views, it writes a simple cookie to remember that they’ve chosen to use the stylesheet that hides the message.

Credits and additional reading

I’d like to stress that what I’ve done here is re-purpose an existing script from ALA and made use of the conditional commenting to show you that you can phase out support for IE6 while not annoying users by displaying a message on every page they visit on your site. As such, here are a few links to the resources and some compelling reasons you should try help “educate” your users on upgrading their browsers.

As ever, if you have any questions, thoughts or feedback, please post a comment. I’d be interested to see other peoples methods for “educating” their site visitors about the continued use of IE6.

Posted 6 years ago on · Permalink