RGBa Browser Support

Interactive Online > Blog  > Web Design  > RGBa Browser Support

RGBa Browser Support

This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers. 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 […]


This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers.

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; the first thee numbers representing the color in RGB values and the fourth representing a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque). We have long had the opacity property, which is similar, but opacity forces all decendant 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 its descendants 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 most likely be solid (fully opaque). Not declaring a fallback 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: 05/14/2010

Browser, Version, Platform Outcome Fallback
Mozilla Firefox 3.x (and up) Works
Mozilla Firefox 2.x (and down) Doesn’t Work Solid Color
Google Chrome (any version) Works
WebKit – Safari 3.x (and up) Works
WebKit – Safari 2.x (and down) Doesn’t Work
Mobile Safari (iPhone / iPod Touch / iPad) Works
Opera 10.x (and up) Works
Opera 9.x (and down) Doesn’t Work Solid Color
Internet Explorer 9 Preview Works
Internet Explorer 8 (down to 6) Doesn’t Work Solid Color
Internet Explorer 5.5 (and down) Doesn’t Work No Color
Netscape (any version) Doesn’t Work Solid Color
BlackBerry Storm Browser Works

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

Other Examples


Background image visible through dark content areas

Border of the facebox plugin uses RGBa borders

RGBa galore on 24 ways

Color variations

Instead of having to remember or look up a bunch of different hex values for shades of gray, you can just use RGBa to adjust pure black to a shade that works e.g. rgba(0,0,0,0.3); That is, assuming transparency is cool for whatever the application is (great for shadows, not great for text). Don’t have to be black either obviously, you could make a whole monochromatic color scheme with any color this way.

(read full article on source site)
Free Website for Your Dental Practice
See why our dental practice websites exceed the features & value of your typcial dentist website.
  • No cookie-cutter websites
  • No duplicate content
  • Custom built with a unique look and feel
  • Unique content written by professional writers
  • Set yourself apart from other dentists
  • The key to your online success!
* we never share your e-mail with third parties.