Don’t kill IE6, degrade it.

Mar 11

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.

.resources01
{
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}

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.

div {
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
}

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.

@font-face
{
	font-family: Gesture; /* name the custom font for use on elements */
	src: url('Gesture.ttf');
}
 
h1
{
	font-family: Gesture; /* Applies custom font all h1's */
}

Multiple columns

If you have ever wanted to split paragraphs into multiple columns you can use the multi-column properties so a paragraph could mimic that of a newspaper layout with thin columns of text. This feature has been around for quite a while, it’s been in Firefox since version 1.5. Viewing this in a supporting browser will be split the text into 2 columns. Depending on the column-width and the room the paragraph has got to work with it will span more columns than 2, unless column-count is specified.

p
{
	column-width: 200px;
	column-gap: 16px;
	-moz-column-width: 200px;
	-moz-column-gap: 16px;
	-webkit-column-width: 200px;
	-webkit-column-gap: 16px;
}

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.

The following text will have a white shadow around it in supporting browsers.

p
{
	text-shadow: 3px 3px 3px #fff;
}

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

In supporting browsers this black box should have a white shadow appear around it with 10px offset from the bottom and right and a 10px blur radius to give it a feathered look.

div
{
	box-shadow: 10px 10px 10px #fff;
	-webkit-box-shadow: 10px 10px 10px #fff;
}

And now to put it all together

In a really good browser you should see the box have rounded corners have a transparent background, the paragraph of text should be split into 2 columns, the text should be rendered in a non standard font and finally the text and containing box should have drop shadows.

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.

Post filed under: css, rant.

Skip to comment form.

Comments

Hey, pretty cool techniques. I gotta disagree with one thing however – degrading IE.

Since, you know, IE browser compatibility is considered usually when someone pays you to code a project, it’s not really a good idea.

I’m noting this because everyone can make his personal site IE-unfriendly. I even consider it a good thing.

However..

The only time I did degraded a design was some time last year and the client saw things as a rip-off. Yes, I explained and explained, but.. you know.. clients.

Recently, someone told me of a better approach – charge 30% more for each standards un-compliant browser.

Cooler, huh?

My comment is not exactly by the subject, but I doubt someone would go this far for personal use.
yMladenov, December 30th, 2009
I do understand your concerns about a client feeling ripped off but that’s where upfront communication is key. Educating the client that IE browsers require extra work and would be considered an additional expense on top of the cost of the build.

There are many influential people in the web industry who share my philosphy and 24ways.org recently published two great articles on this very subject and how to tackle it with clients. Ignorance is bliss and Make your mockup in markup.
The Css Ninja, December 31st, 2009
Well said. Guess I should stick to the rule that every business mistake is a mistake of the business owner. Harsh but true..

Thanks for those link. Liked the story of the second one. Much better implementation (than mine) of your idea.

Yeah, upfront communication is key.

I should move on to affiliate… :)
yMladenov, December 31st, 2009
By the way, you seem to have a problem with the alignment of emoticons – the last one should have been to the right of the last line.

Have a great new year celebration, by the way!
yMladenov, December 31st, 2009
Don’t shift your ways because someone else has said you should. Look at it case by case, depending on the client would be best to choose which way you go about it.
The Css Ninja, January 2nd, 2010
Thanks for the tip, CSS Ninja. :)
yMladenov, January 3rd, 2010
hey ninja, just trying this out now, and I can’t seem to maintain backwards compatibility with IE in the same stylesheet (unless of course I use an IE conditional stylesheet).

What I mean is, if I put background-color:rgb() AFTER background-color:rgba(), it will clobber the transparency in all browsers. But if I put rgb() BEFORE rgba(), IE ends up not appling a background color AT ALL, and of course the rgba statement applies normally in Firefox.

If this is true, then we have no choice but to ALWAYS use a conditional stylesheet to reapply a background color in IE browsers every time we want to use RGBA!!!
Michael, February 9th, 2010
That’s an interesting find, in IE6-7 using background-color: rgb(); followed by background-color: rgba(); will fail. I did a similar technique of using rgb/rgba in another article and that works fine in IE6/7 the only difference is that I use background rather than background-color that seems to fix it.
The Css Ninja, February 9th, 2010
Ryan,

You are entirely right concerning rgb/rgba, using:
div { background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); }
…works perfectly.
Mark, April 26th, 2010
Hi,

In your article, you have stated the background-color properties in the wrong sequence. It should be RGB first and then RGBA. All browsers read the RGB, and the ones that are able will replace it with the RGBA.

Unfortunately, there is another problem. IE, our whimsical friend for some reason messes this up too, and will show a blank background. Instead, if you use only the background property instead of background-color, it will work properly – as Mark, in the comment before says.

You should edit the article to reflect that, or some frustrated beginner might end up spending a lot of time troubleshooting.

Vidyut
Vidyut, December 23rd, 2010
@Vidyut – Thanks, have updated the CSS in the article.
The Css Ninja, December 24th, 2010
Is there a way to use a transparent image if the rgba transparency doesn’t work? I have a menu that I would like to have a transparent background such as background-color:rgba(0,38,100,0.8), but when that isn’t read by older browsers, to use a background image, instead. Would that even be possible? My client really likes the transparency, and is not sold on the solid as an alternative at all.
Jules, May 17th, 2011
@Jules –

If you’re looking to add transparency to IE8 and down you can use MS’s filter property to do it and you won’t need an image.
background-color: transparent; background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); /* IE6–IE9 zoom: 1;
You can easily generate the filter CSS needed by going to css3please.com and editing the rgba value there and it will update the filter value to match it.
Ryan Seddon, May 27th, 2011
Great article, thanks.

I have found that applying transparency to text suffers the same problem as “background-color”. If I have
color: rgb(255, 255, 255);
color: rgba(255, 255, 255, 0.5);
IE7 ignores both lines and uses parent definitions
IE8 user the fallback
IE9 user rgba
Any idea how to fix this for IE7?
Shaun Donovan, September 7th, 2011
@Shaun Donovan –

To fix this in IE7 will require a “safe CSS hack” for IE7 and lower. You can pretty much guarantee rgba to be supported in all major browsers so I would write the CSS like so:
color: rgb(255, 255, 255); color: rgba(255, 255, 255, 0.5); *color: rgb(255, 255, 255); // IE7 and older
Unfortunately you need to declare rgb twice. Since IE8 works fine with the current solution. If you’re not too concerned with IE9 having transparent text you can use the \9 hack.
color: rgba(255, 255, 255, 0.5); color: rgb(255, 255, 255)\9; // IE9 and older
That reduces the redundancy but excludes IE9 from using rgba which it supports.
Ryan Seddon, October 3rd, 2011