Background fallbacks2

RGBA colors are a very cool part of the CSS3 spec. As you may know, they’re simply RGB colors (red, green, blue) with an added channel for alpha (opacity). Very useful to apply to layout elements and even text.

So far, only Webkit (since Safari 3), Gecko 1.9 (Firefox 3) and Opera 10 support RGBA colors. Providing fallback colors for Internet Explorer is easy though, using styles served within conditional comments. But maybe you refrained from using RGBA because you wanted to support older versions of Safari, Firefox and Opera. Well, you should wait no longer, because there is a perfectly simple fallback mechanism: provide two backgrounds.

Say you want to use a pretty picture with a semi-transparent box on top of it. That’s very easy with RGBA colors. Older browsers will see a fully transparent box though, because they don’t understand rgba, and they’ll ignore it. The solution:

.box1 {
	background: #fff;
	background: rgba(255, 255, 255, .5);
	}

Older browser simply ignore the rgba color, and fall back to the plain white. It even works with images, so you can provide a png alternative with the same visual result. But since new browsers understand rgba, they won’t load the image.¹ Hurray for bandwidth!

.box2 {
	background: url(white.png) repeat;
	background: rgba(255, 255, 255, .5);
	}

We can take this even one step further, by applying gradients as a background, which only Webkit nightlies understand so far:

.box3 {
	background: url(gradient.png) repeat;
	background: -webkit-gradient(linear, top, bottom, from(
rgba(255, 255, 255, .3)), to(rgba(255, 255, 255, .0)));
	}

Take a look at this test case, which looks acceptable in all browsers. Older, non-IE6 browsers get an opaque white as a fallback in the first box. IE6 gets three opaque white boxes.

So, no excuse to be conservative with your backgrounds, just remember to specify a fallback for older browsers.

1. From my testing this seems to be true with Firefox only though. Safari 3 and the latest Webkit nightly still download the image – which I deem incorrect behavior. I’m not sure how to test this in Opera. [↩]