Don’t kill IE6, degrade it.

Buzz about the internet has been rampant this year with many claiming that this is it, 2009 will be the death of IE6. A campaign in Norway has declared war with some great success. There are now some high profile Norwegian sites following with a week long campaign to educate users on more suitable browsers they can use instead of IE6.

As a front-end developer there is considerable time involved in making some of IE6’s short comings work the way they do in more standard compliant browsers. But with a large user base still using IE6, and this is usually not their choice but is part of their internal legacy infrastructure. We don’t have solid ground to stop supporting IE6 all together. A client paying a large amount of money would expect their product to work regardless of what browser they use and usually they aren’t even aware what browser they are using. It would only fuel frustration to a user to have a big message appear stating they are using obsolete software.

Don’t kill it, degrade it

What is really needed is for front-end developers to gracefully degrade a website in IE6. A website is still very much functional but doesn’t have all the bells and whistles of a more modern browser. Let’s take a look at 5 things we can do that won’t ruin the experience for a user in IE6. For users of good browsers their experience will only be made more appealing through the techniques we are about to go through.

Rounded corners

This website utilises rounded corners on the link whoring box at the top of each post. It uses a mixture of CSS 3’s border-radius property, along with the propriety implementations of this property by mozilla & webkit.

Border radius is set to 6px for all corners, you can of course set all 4 corners to be different using the clockwise motion top, right, bottom and left. The -webkit & -moz is set so it will work in firefox and webkit based browsers such as safari.

Transparency using RGBA

Another example would be utilising the rgba property to accomplish transparency of an element, and as a fallback for non supporting browsers would be to use a solid colour. Why not use opacity you ask? The difference is that rgba will not cascade the opacity level set to the parent to its child elements as opacity currently does.

The example above would make all div elements black and if it supports rgba the black would become 70% transparent. Some of the earlier Firefox releases would read from the rgba property but not apply the transparency, the reason it is there twice is because browsers like IE will skip the rgba element as it doesn’t know what it is.

Custom fonts

Custom fonts without flash or javascript using @font-face. If the browser doesn’t support it it will utilise the base set browser font. This upcoming feature which is currently only supported in safari 3.1 & 4, Opera 10 alpha and the upcoming Firefox 3.5 is bound to get some solid use as there is no consequence with using it if the browser doesn’t support it.

If you’re looking at this sentence in a supporting browser it should be rendered out using a custom font.

Multiple columns

Drop shadows

Setting up drop shadows to work fluidly has been a headache in any browser, IE6 makes it worse by not supporting 24bit transparency in png images. CSS 3 is to the rescue again with 2 great properties text-shadow & box-shadow. Text shadow was proposed in CSS 2 but the only browser to implement it was safari.

We can also set shadows to block elements with box-shadow, such as a div. This is much more useful than text-shadow property.

And now to put it all together

It should be noted that these techniques, support may be sporadic between different browsers and if it’s a must for all browsers it may not be a viable option. But these are all safe to use as they are non destructive if the browser doesn’t support it.