"Does Not Support IE6" Messages - How You Can Help Kill IE6

DZone 's Guide to

"Does Not Support IE6" Messages - How You Can Help Kill IE6

· Web Dev Zone ·
Free Resource

Are you ready to do your part in ending the Internet Explorer 6 pox upon the internet?  Sure they had that funeral for it a couple of weeks ago, but let's not kid ourselves - it's still out there.  It has more installations than Chrome 4.0 or Firefox 3.5.  To really close the coffin on IE6 we're going to need to stop pulling our hair out trying to support it and leave it behind when we build or update our websites and web applications.  All you need to do is make a big "Does not support IE6" banner that pops up when a poor old IE6 user tries visit your website.  A simple CSS hack (strictly speaking) will do the job.  The SevenUp project is also dedicated to the 'kill IE6' cause, and they provide a simple solution as well.

Conditional Comments
Conditional Comments are great for this situation because they only work on your intended targets - people using Explorer or Windows (specifically IE6).  They're supported by browsers as ancient as IE5, so it shouldn't have any problems working properly.  This method will show a bar or box clearly visible to the user.

Here is an example of a conditional comment:

<!--[if IE 6]>
Upgrade Your Freakin' Browser!

Dang that's simple!

Their structure (<!-- -->) is the same as an HTML comment, meaning the other (more enlightened) browsers will just ignore them.  Explorer Windows is the exception.  It will recognize the syntax and parse the comment as if it were a normal piece of content.  You also can't put the comment in a CSS file, but you can put a <link> tag in the comment that refers to an extra style sheet.

Here are some alternate examples that can detect other variables relating to browser versions of Explorer  (gt: greater than, lte: less than or equal to):

<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />

The Conditional Comments are considered CSS hacks  [http://www.quirksmode.org/css/csshacks.html] because they give special style instructions to certain browsers, but they don't rely on one browser bug to solve another one, which is something that a CSS hack does.  Because Conditional Comments are based on a deliberate feature of IE only, they are safe to use.

There's also another, equally simple solution to your IE6 infestation.  The open source project, SevenUp, provides one small JavaScript file that is placed in the page header.  Then you call the testing function:

<script type="text/javascript" src="sevenup.0.3.min.js"></script>
<body onload="sevenUp.test( options, callback );">

That's it.  You can even use the "black" plugin:

<script type="text/javascript" src="sevenup.0.3.min.js"></script>
<script type="text/javascript" src="sevenup_black.0.3.min.js"></script>
<body onload="sevenUp.plugin.black.test( options, callback );">

Feel free to create your own plugin as well.  You can find SevenUp's plugin example: 'sevenup_pluginexample.0.3.js' on their Google Code site.  Just take that plugin, rename it to your plugin name, and fill in your HTML.

When an IE6 (or older) user views a page with SevenUp, a pure CSS lightbox will come up with the SevenUp message (seen below).  Users with other browsers won't see anything.  You can give users the options to click through the lightbox, or require that they upgrade to view the page.  If JavaScript is turned off, they won't see the message, so in some cases the conditional comment may be your only option.

SevenUp triggered by IE6.  No plugins.

Now you're finally ready to go out there and teach those IE6 users a thing or two!


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}