Did you know? DZone has great portals for Python, Cloud, NoSQL, and HTML5!

Mitch Pronschinske is the Senior Content Curator (aka. "Lord of the Zones") at DZone. That means he writes and searches for the finest developer content in the land so that you don't have to. He often has hotdogs for lunch, likes to make his own ringtones, enjoys card and board games, and is married to an underwear model. Mitch is a DZone employee and has posted 1703 posts at DZone. You can read more from them at their website. View Full User Profile

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

04.07.2010
Email
Views: 5892
  • submit to reddit

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!
<![endif]-->

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

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.

SevenUp
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!

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Mark Bradshaw replied on Wed, 2010/04/07 - 10:32am

Certainly whatever can be done to boost IE6 users out of the dark ages is great. Here's a great project that you should mention, though. IE6 Update gives the user an upgrade message in a way that mimics the normal look/feel of an IE message, and is less obtrusive. http://ie6update.com/

Mitch Pronschinske replied on Wed, 2010/04/07 - 1:00pm in response to: markbradshaw

Thanks for the tip, Mark!

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.