"Does Not Support IE6" Messages - How You Can Help Kill IE6
Join the DZone community and get the full member experience.Join For Free
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 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.
<body onload="sevenUp.test( options, callback );">
That's it. You can even use the "black" plugin:
<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.
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.