RGBa Browser Support
RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this:
div {
background: rgba(200, 54, 54, 0.5);
}This allows us to fill areas with transparent color. We have long had ‘opacity‘, which is similar, but opacity forces all child elements to also become transparent and there is no way to fight it (except weird positional hacks) Cross-browser opacity is also a bit sloppy.
With RGBa, we can make a box transparent and leave it’s child elements alone:
Declaring a fallback color
Not all browsers support RGBa, so if the design permits, you should declare a “fallback” color. This color will be solid. Not declaring one means no color will be applied in browsers that don’t support it. This fallback does fail in some really old browsers.
div {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, 0.5);
}Do be aware of this bug though, related to not using shorthand in IE 6 and 7.
Browser Support for RGBa
Last updated: 02/07/2010
| Browser, Version, Platform | Outcome | Fallback |
|---|---|---|
| Firefox 3.6 (OS X) | Works | — |
| Firefox 3.0.5 (OS X, Windows XP, Vista) | Works | — |
| Firefox 2.0.0.18 (PC) | Doesn’t Work | Solid Color |
| Safari 4 (Developer Preview, v4.0.4, Mac) | Works | — |
| Safari 3.2.1 (PC) | Works | — |
| Mobile Safari (iPhone) | Works | — |
| Opera 10.10 (OS X) | Works | — |
| Opera 9.6.1 | Doesn’t Work | Solid Color |
| IE 5.5 (PC via IETester) | Doesn’t Work | No Color |
| IE 6 (PC via IETester) | Doesn’t Work | Solid Color |
| IE 7 | Doesn’t Work | Solid Color |
| IE 8 (Beta 2 & release version) | Doesn’t Work | Solid Color |
| Google Chrome 1.0.154.43 | Works | — |
| Google Chrome 4.0.249.49 | Works | — |
| Netscape 4.8 (PC) | Doesn’t Work | No Color |
| SeaMonkey 1.1.14 | Doesn’t Work | Need Info |
| Sunrise 1.7.5 | Works | — |
| Stainless 0.2.5 | Works | — |
| Flock 2.0.2 | Works | — |
| BlackBerry Storm Browser | Works | — |
| Camino 1.6.6 | Doesn’t Work | Need Info |
Data gathered from this demo, which includes MORE COMPLETE browser compatibility list.
A better fallback for IE
Since IE supports conditional stylesheets, we can bust out those and a proprietary Microsoft CSS filter to accomplish the same result:
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->More Information
- Hedger Wang: Implement RGBa colors for Modern Web Browsers. The IE hack from this article is directly credited to Hedger. This article also contains a technique for using <canvas> to support Opera.
- Hedger also has a new technique implementing Kevin Linsey’s JavaScript PNG Generator.
- Tim Kadlec: Not As Clear As It Seems: CSS3 Opacity and RGBA
- Andy Clarke: Is CSS3 RGBa Ready To Rock?
- There is an often-referenced article on CSS3.info on this subject from 2006, but that site hasn’t been up for me in quite a while.
Loading ...
Great article Chirs!
You’ve really covered it well
Nice discussion on rgba… don’t use rgb colors that often, but once this is more cross-browser I am sure it will be used more.
I wasn’t aware of the IE hack functionality … very nice!
Agree w/ Brenelz, and yes, thanks for laying out that IE hack from Hedger so clearly.
I hope the browser start using this, as it seems a reasonable way to do it, easy to program/learn.
FYI, IE 8 RC1 on Vista doesn’t support it either. :(
Can we just get rid of IE? I’m sick of spending so much time pampering it.
Nice! Never knew about this.
IE 5.5 not supporting it? Understandable.
IE 8? Inexcusable. I’ll just toss this on the incredibly long list of reasons that I get rabid anytime someone says they use IE.
Camino 1.6.6 falls back to solid colour.
Camino 2.0b1 Works properly.
Very useful!
Big surprise that IE doesn’t support this, not even IE8.
IE not supporting it? sounds like something new! ;-) nice hack, keep up the great work.
IE gives me sucha boner.
Opera 10 will support RGBa too ref: http://dev.opera.com/articles/view/presto-2-2-and-opera-10-a-first-look/#opacity
And cant this be done with a png image too?
You should remove the apostrophe here.
Opera 10 Alpha and later versions fully support RGBA and HSLA.
Just yesterday I read an article about using opacity and was going to write about RGBa being a more modern, even forward-thinking approach.
Great article Chris, personally I wouldn’t use the IE fix as I believe there’s a performance hit with using CSS expressions (if performance is an issue for the site in question) but agree it completes the article to discuss the method.
Personally, I would settle for a solid colour being used by IE, but project meetings may dictate otherwise ;-)
I used this already in the last month a web site swe designed. The fallback worked well since it was a dark grungy background anyway. If you are curious http://www.2×3campaign.com the prefooter part.
Thanks for sharing.
Please, fellow designers, stay away from IE hacks! I cannot stand them anymore.
Really slick… I always used to use a 1 pixel semi transparent png to achieve the same effect. Only dissapointment is the lack of widespread browser support.
Very nice and informative article, Chris. I was not aware of the IE fallback, that’s a nice trick.
Anyhow, I’ll stay away from RGBa until browser support (read: IE (besides, in my native country Opera has a bigger marketshare than worldwide)) catches up.
Thank you for sharing… :D
Biju Subhash
I’m excited to see more of the benefits of CSS3 in action and watch the web get better over time… As always, thanks for all the great tips & tricks.