One of the latest entries in the new features provided by the CSS3 modules is the ability to add the alpha channel to CSS colors (both foreground and background colors). As many of you already know, the alpha channel handles color transparency. Thus if you add this channel to a CSS color, the aforementioned color is able to show part of the background color of its parent. However, what happens when a browser doesn't support this feature? If you simply add a single declaration, then the browser will ignore the declaration and your element won't display any color at all.
The only thing you need to do is to manage this situation in the same way you handle other CSS3 properties, such as borders. In a nutshell, write two color declarations, one for browsers that don't support the RGBA notation and one for browsers that actually support it. Example:
#box {
width: 100px;
height: 100px;
background: rgb(221, 68, 0);
background: rgba(221, 68, 0, 0.5);
}
As you can see, the backward-compatible declaration comes first so that your element will have its background color. Then we override the preceding declaration with the RGBA-compatible notation for all supporting browsers.