RGBa backgrounds in IE

RGBa is the new black, with support in most modern Safari 3, Firefox 3 and Opera 10, you can have semi transparent elements. Only there is no support currently in IE for RGBa.

However, you can easily fake it for backgrounds of block elements in IE with
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#aaRRBBGG', EndColorStr='#aaRRBBGG);
The filter gradient places a alpha channel colour gradient over the background. So as long the background is transparent, the start and end colours the same and the alpha (aa) channel a value greater than 0 (fully transparent) and FF (fully opaque), you get a block element in IE with a RGBa background. You can see an example of RGBa in action in IE

The simplest way is including in your CSS
background: transparent ;
background: rgba(255,0,0,0.5) ;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88ff0000', EndColorStr='#88ff0000');

Which is clean and simple, even it does deliver you invalid CSS. There are two problems, if a browser does not support RGBa and is not IE, (eg FF2) the block element background will be transparent. I do not think that is a major issue right now. There are a handful of browsers outside IE in use that do not support RGBa. My main concern is future proofing, the next major version of IE (the beta is due within a year) will support RGBa (as well as HTML5 and some CSS3 according to sources) and as usual will maintain backwards compatibility with earlier versions of IE. So you will get a semi transparent background colour overlaid with a semi transparent gradient.

The solution, is to provide a stylesheet to all browsers and an extra stylesheet to IE8 and below with conditional comments. So your CSS will have:
background: fallback color RGB or hex ;
/* background colour for browsers that are not IE that do not understand RGBa */
background: rgba(R,G,B,a) ;

Your HTML will include (note don’t try and cut and paste from here as grab the text file instead):
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="/xtras/ieonly.css" media="screen" />

And ieonly.css file include:
background: transparent ;
/* needed to clear the background colour */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88ff0000', EndColorStr='#88ff0000');

If you don’t believe me and do not have IE6, here is the screenshot. And I was not the first one to suggest this method for implementing RGBa in IE, Hedger Wang did some time ago, and even suggested using canvas to provide the transparent background to FF2. I only found his example while finalising this post.

Comments are closed.