Kilian Valkhof

How to use RGBA() in IE

The modern browsers all have rgba(), giving you a semi-transparent background colour while keeping the foreground elements (text, images) fully opaque. But if you want to use that in your design, what about IE? Here’s how to do it.

A while ago I madea design with lot’s of semi transparent areas (I know, stupid me, it’s only 2010 after all) and solved that in modern browsers with rgba(). All fine and well, I threw in some border-radius and box-shadow, and from Opera through Firefox to Webkit, it looked increasingly better. Great, I’m all for progressive enhancement. Except it of course looked really bad in IE. I set out to find an acceptable solution.

Gradients, where? #

For general opacity, we have the alpha filter. but that sets the opacity of foreground elements as well, making it useless in this case. Looking a bit further, I found the gradient filter. Seeing as how I needed transparency and not gradients, this didn’t seem very useful.

But the gradient filter supports some fun stuff. While it’s not mentioned anywhere in the msdn article, the gradient filter has an #ARGB syntax. That’s right, the A is for Alpha. No, I don’t know why it’s at the front.

Anyway, Gradients don’t have to be between two different colours, right? You can just as easily go from white…to white. So that’s what I did:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);

And there you go, alpha-transparent backgrounds!

Gotcha’s #

Of course, it’s not that easy. rgba() notation is in values from 0 to 255, with the a being a floating point between 0 and 1, and #ARGB is in hexadecimal format. You need to convert rgba() to #ARGB to make it useful.

I’ve saved you the math, here’s an easy (to and from) converter:

Convert to and from rgba() and #ARGB #

More gotcha’s (or: Oh, IE!)

Of course, just finding the correct value for #ARGB isn’t the only problem you will have. There are more downsides. For one, the code above isn’t actually the one you have to write. The code below is:

background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
zoom: 1;

Firstly, you have to set the actual background to none, then you have to use -ms-filter for IE8, filter for everything below, and set zoom:1; to make sure the element has hasLayout (or else the filter doesn’t work.)

Apart from the code, there are two other downsides: When you use filters, ClearType gets disabled. That’s a pretty big downside, since non-cleartyped text looks hideous. According to some you can fix it, but YMMV.

Secondly, as soon as you place the website in an iframe, say goodbye to the A in your gradient. the backgrounds will lose there transparancy and look hideous. I learned that the hard way. if you use the gradient filter, don’t display your site in an iframe.

Should you use it? #

Using stuff like this, it’s a bit like we’re dragging IE along, kicking and screaming. And that’s what we do. We want to move forward, so we find ways to get around the limitations of lesser browsers. Whether losing ClearType is worth it depends wholly on the design. In my case it did, in your case, it might not.