Support for IE6: It’s all About Accessibility
With the release of IE8, there’s excitement in the air about ending support for IE6. Will 2009 be the year in which everyone can drop IE6 support for good?
You’ve probably seen the anti-IE6 campaigns (Stop IE6, Bring Down IE6, End 6); some are well-intentioned like Browser Upgrade Information, while others have all the subtlety of a witch hunt, like the Shockingly Big IE6 Warning plugin for WordPress. Before we all decide to burn IE6 users at the stake, I think we need to gain some perspective about who’s still using IE6 and why. Here’s an anecdote I can offer that will hopefully convince you that IE6 users are not an amorphous cloud of faceless evil.
In a previous job I worked for an architectural company, developing their intranet and web site. With regards to IT policy this company is far from conservative, often researching new technology with a view to improving their core product: excellent design. A few years ago, just before IE7 was released, the company made the decision to purchase a feature-filled, web-based project management and accounting system. It would considerably improve project management across the company — but was only compatible with IE6.
Compatibility with IE7 was promised, but only delivered at the end of 2008. The IT manager has avoided upgrading the company to IE7, opting to wait for IE8. Luckily — thanks to some clear-headed thinking on Microsoft’s part — IE8 can behave as IE7, so they’ll be able to upgrade to IE8 and use the IE7 mode for their intranet. They have over 200 employees and only a small number of IT staff to manage the upgrade. It will probably happen this year, 2009.
You may be wondering why they’ve chosen to stay with Internet Explorer, rather than installing another browser for their everyday web browsing. The company uses Windows roaming profiles; this allows the architects to use any workstation in the company as they move between project teams — sometimes between offices in different states. Windows group policy features are also used to manage employee credentials, permissions, and software settings more efficiently. Internet Explorer supports both of these tools very well, unlike other browsers. Why install a second browser that would only increase the workload of the small but efficient IT support team?
The architects at this company would be unable to act if presented with a message that their browser software should be upgraded. Such a message would be little more that an annoyance, or worse if their access to a site was restricted. It’s an accessibility issue.
IE6 is still averaging around 20% of web traffic, so preventing IE6 users from accessing your web site is the wrong approach to take. I’m doubtful whether messages encouraging them to update their browser is going to help either. It’s also inadvisable to simply stop testing in IE6. A rational approach is needed, one that considers what percentage of your sites’ visitors use IE6, and what experience you should provide for them.
Conditional Comments: Workarounds for IE6
Conditional comments are the best way to control the experience of your IE6 users. At the very least, IE6 users should be able to view your content. Using the confusingly named "downlevel-revealed" conditional comments you can hide all CSS from IE6 (and earlier versions), revealing only unstyled content:
<!--[if gte IE 7]><!--> <link rel="stylesheet" type="text/css" href="style.css"/> <!--<![endif]-->
This is a similar approach to using
@import to hide CSS from Netscape Navigator 4. CSS support in NN4 was broken and could crash the browser, which justified that drastic approach; IE6 is far more capable than NN4. The second option is to make a separate, simple but usable layout for IE6. For example, if your site’s layout has multiple columns, make a single column layout for IE6. IE6 is served a special style sheet, while all other browsers are served the standard style sheet:
<!--[if gte IE 7]><!--> <link rel="stylesheet" type="text/css" href="style.css"/> <!--<![endif]--> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie6-layout-style.css"/> <![endif]-->
The third option is to serve up the standard layout to IE6, but add a few fixes here and there, so that there may be some differences in the IE6 version. All browsers except IE6 are served the standard style sheet, while IE6 is served the standard style sheet plus the special IE6 style sheet. Using the cascade the special style sheet overrides some of the standard style rules to fix IE6 problems:
<link rel="stylesheet" type="text/css" href="style.css"/> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie6-fixes-style.css"/> <![endif]-->
An alternative approach, if the above is unsuited to your method of managing styles, is to use conditional comments to modify the body tag, like so:
<!--[if gte IE 7]><!--> <body> <!--<![endif]--> <!--[if lt IE 7]> <body class="ie6"> <![endif]-->
By doing the above, you simply preface a style rule selector with the class selector "
.ie6" to make an IE6-only rule.
Whatever you choose to do, it has to make sense for your site. Research how many IE6 users visit your site and try to find out who they are. Some excellent articles have been written recently about how to deal with IE6:
- The IE6 Equation by Jeremy Keith
- How to Make IE6 Behave by Niels Matthijs (who has also released the IE6 CSS Fixer: Starter Kit)
- Developing CSS for IE6 and 7 by Rachel Andrew
- 10 Fixes That Solve IE6 Problems by Craig Buckler
So how will you deal with IE6?