Internet Explorer 6 is the bane of web developers everywhere, much like Netscape 4 was in the early 2000s. How do we support IE6 users without going crazy?
There is a growing campaign in the web development community calling for the death of version 6 of the Internet Explorer browser by Microsoft. Introduced in 2001, it had ruled the market share of browser usage for years until the coming of Mozilla’s Firefox and Microsoft’s own Internet Explorer 7.
I did a quick Google search for the term “ie6” and found a startling six “death to ie6” websites on just the first two pages of results. These include:
- Bring Down IE6
- STOP IE6
- IE6 Update
- IE Death March
- DearIE6
- Stop IE6
One of the main reasons for the IE6 hate is its lack of support for web standards such as full CSS 2.1 compliance and PNG alpha transparency. Another is its many security issues which come with being the top browser for approximately 5 years. While no browser available supports every standard, even IE7 at least supports a larger contingent of CSS 2.1 selectors, PNG alpha transparency and is a little better on security.
While it may seem easier to point visitors to new browsers like Mozilla’s Firefox, Opera, Google’s Chrome, Apple’s Safari or even Microsoft’s Internet Explorer 8, it is important to note that some people either can not or will not upgrade. Many business computers still run IE6, and will do so for years to come. So what is the solution for web developers who want to escape having to “fix” their websites for IE6?
Andy Clarke, a member of the Web Standards Project and a former invited expert to the W3C’s CSS Working Group, provided a solution that I find appealing. Since the content of a website is most important, make sure that content is viewable and accessible to users of IE6 by providing them with an IE6-only CSS stylesheet. This renders the page in a very readable and organized yet generic design while separating the main design for others using more current and advanced browsers.
This is done by inserting IE conditional comments into the <head> portion of your website’s HTML, like so:
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.0.3.css" media="screen, projection" /><![endif]-->
The stylesheet code is available on Google Code for anyone to use for free. I am using it on this website as a mere 10% of my visitors are currently browsing with IE6. It is important that designers and developers view their logs and stats to determine what browsers to support. I will usually adapt my design for IE6 (or any other browser) if more than 30% of my visitors are using it.
As Jeffrey Zeldman said when referring to Clarke’s method, “no solution, however elegant, will work for every situation.” But work like this will allow for an easier transition as the world upgrades.