RGBa backgrounds in IE

RGBa is the new black, with sup­port in most mod­ern Safari 3, Fire­fox 3 and Opera 10, you can have semi trans­par­ent ele­ments. Only there is no sup­port cur­rently in IE for RGBa.

How­ever, you can eas­ily fake it for back­grounds of block ele­ments in IE with
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#aaRRBBGG', EndColorStr='#aaRRBBGG);
The fil­ter gradi­ent places a alpha chan­nel col­our gradi­ent over the back­ground. So as long the back­ground is trans­par­ent, the start and end col­ours the same and the alpha (aa) chan­nel a value greater than 0 (fully trans­par­ent) and FF (fully opaque), you get a block ele­ment in IE with a RGBa back­ground. You can see an example of RGBa in action in IE

The simplest way is includ­ing 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 prob­lems, if a browser does not sup­port RGBa and is not IE, (eg FF2) the block ele­ment back­ground will be trans­par­ent. I do not think that is a major issue right now. There are a hand­ful of browsers out­side IE in use that do not sup­port RGBa. My main con­cern is future proof­ing, the next major ver­sion of IE (the beta is due within a year) will sup­port RGBa (as well as HTML5 and some CSS3 accord­ing to sources) and as usual will main­tain back­wards com­pat­ib­il­ity with earlier ver­sions of IE. So you will get a semi trans­par­ent back­ground col­our over­laid with a semi trans­par­ent gradient.

The solu­tion, is to provide a stylesheet to all browsers and an extra stylesheet to IE8 and below with con­di­tional com­ments. 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" />
<![endif]-->

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 screen­shot. And I was not the first one to sug­gest this method for imple­ment­ing RGBa in IE, Hedger Wang did some time ago, and even sug­ges­ted using can­vas to provide the trans­par­ent back­ground to FF2. I only found his example while final­ising this post.

Comments are closed.

Google