How to cater to IE6 without really having to do more work
The IE6 debate continues. Should web designers support it? Should we at least test on it? Or should we ask IE6 users to go lay an egg in a variety of ways from terse and subtle to completely blocking the site or even being kind of deceitful?
Actually, there’s no such debate. It has no basis. A good web developer will support all browsers to the degree that browsers are able to display different elements in a site. Old browsers will be shown the things they can interpret while newer browsers will be let loose to work their magic. There’s no yes, if, or buts. It’s a simple question of accessibility and being a good web designer. A store owner wouldn’t refuse service to someone just because they arrived in a ’92 Lada or a beat up pick up truck. Well, maybe some would but they would be jerks. Do you want to be a jerk? If you don’t then don’t behave as one.
Anyway, back to the point of this post. Catering for IE6 is really no more complicated than catering for old browsers. The real trick is in defining what we mean by “support” and letting our clients know that IE6 users will see the bare-bones but fully usable version while newer browsers will see more bells and whistles. If they ask why tell them that IE6 simply is not up to the task of the modern bell and whistles, but for a charge you can add some of those if required because that represents extra work.
However, just serving a basic style sheet to IE6 doesn’t represent any extra work because you need to create one for older browsers anyway. Of course you know how to deliver a complementary style sheet to IE6 using conditional comments, but remember that you can also hide things with those comments. So, what we are going to do is this:
<!-- Basic styles for older or simpler browsers -->
<link href="basic.css" rel="stylesheet" type="text/css" />
<!-- Let's use conditional comments to keep IE6 out. Take that, IE6! -->
<!--[if gte IE 7]><!-->
<style type="text/css">
@import url("advanced.css");
</style>
<!--<![endif]-->
First we link a basic style sheet that most browsers will understand. Here we can set up our basic fonts stacks, fixed widths, some floats, use safe gifs and jpgs, etc. Then the conditional comments keep IE6 and lesser away from importing the advanced css style sheet, while allowing IE7 and over, as well as other browsers, to read that line. Older browsers won’t know what to do with the @import, so they’ll leave it alone, while newer browsers will read and enjoy the sweet, sweet fixed and absolute positioning, transparent pngs, flexible layouts and other crazy, creative stuff we put there.
Sure, IE7 and IE8 won’t be able to render some of that but at least they won’t throw a fit over it. In fact IE8 is pretty good and you can always use another conditional comment to serve a complementary style sheet to IE7 in those rare instances when it’s really necessary.
Now, some designers will get their knickers in a bunch at the thought of their beautiful work of art being displayed differently in another browser, their carefully positioned elements and lovely crafted transparent backgrounds just done away with in the name of letting a gang of louts not even good enough to update their browsers to be able to come and have their filthy ways with their pristine layouts.
Well, to those designers all I have to say is… maybe you’re just not cut out to be a web designer. It’s another medium, buddy, one where the user has a lot of say in the way the message is used and displayed. If you don’t like it or are not prepared to accept it, maybe you should move back to print or something where you feel safer. Because, as you see, catering to all is not really that difficult and there is no extra work that can be used as an excuse.




“How to cater to IE6 without really having to do more work”