How to support IE6 without dying inside

Published on March 23, 2009

Internet Explorer 8 was unleashed earlier this week, and with it a more voluminous fervor to renounce the much-maligned (at least for web developers) Internet Explorer 6. I see references to Zeldman’s groundbreaking “To Hell With Bad Browsers” article waved around like pitchforks at the fortress gates. In the words of Twisted Sister, “we’re not gonna take it… anymore!”

The sentiment is understandable. We’ve been putting up with the bugs, inconsistencies and security holes of IE6 for nearly eight years. We’ve supported versions 6 and 7 simultaneously since 2006. The choice seems clear: Abandon version 6, or commit to supporting three versions of Internet Explorer simultaneously. Unfortunately, it’s not that simple.

Like it or not, IE6 rivals Firefox with 20% of the browser market share (as of February 2009, according to Wikipedia). Regardless of the cost associated with supporting this productivity vacuum, throwing away one in five potential customers is a hard sell. Even worse is the possibility of crippling your design (and thusly your potential success) to satisfy a dwindling demographic.

Luckily, there are steps you can take to acknowledge IE6 without punishing more capable browsers.

Employ a JavaScript framework

Scripting is arguably the greatest source of inconsistency between all browsers, not just Internet Explorer. Using a capable library like jQuery minimizes browser-specific bugs you (or your users) may encounter.

Develop in modern browsers

Travel to a blissful place where IE6 never existed! Attempt to develop using the best practices you can in browsers with consistent results, such as Firefox, Safari, Opera and/or Chrome. Test in modern browsers, and get things working like a well-oiled machine. If you develop from the get-go in IE6, there's no telling if your bugs are the result of a bad browser or your own bone-headed mistakes. It happens to the best of us!

Use a conditional stylesheet

Conditional comments allow you to target markup at specific versions of Internet Explorer in a standards-compliant (only mildly hack-ish) way. This allows you to store your fixes in a separate CSS file where it can't corrupt your otherwise competently-authored rules. If you've never used conditional comments before, I recommend checking out this article. Oftentimes a few extra styles will be enough to correct major bugs.

Embrace Microsoft's proprietary styles

There are some things (such as 32-bit PNGs and opacity) that IE6 will not support without a fight—at first glance, anyway. Microsoft employs many non-standard but surprisingly customizable styles, some of which are extremely powerful. I commonly use opacity, alphaImageLoader (for transparent PNGs) and behavior (affects objects with small bits of JavaScript).

Use conditional JavaScript

When CSS just isn't enough, use conditional comments to employ browser-specific scripts to run. Many size and positioning bugs can be corrected at page load with the help of JavaScript.

If all else fails, screw em'

Sometimes, it just isn't worth the resources to duplicate every design jewel cross-browser. If you find yourself stumped, accept that IE6 users may have to settle for your next best option; a simple 1-pixel rule will suffice where an alpha-transparent background image fails. Better yet, take this as an opportunity for some unexpected creativity: Stuff & Nonsense shows their IE6 users a mellow, monochromatic layout.

I would love nothing more than for Internet Explorer 6 to be six feet under, but with nearly 20% of the browser market I can no more ignore it than I can Mozilla Firefox. The goal is to remain empathetic to our audience while rewarding those who graduate to more modern solutions. If we create innovations with genuine value, our users will happily come along for the ride.