CSS 3: RGBA today

Introduction

CSS 3 has been under development for a long time, and it is still not done. The wheels of standards organisations grind slowly (unless Microsoft abuses the process). But I digress…

Some parts of CSS 3 are implemented in some browsers, and you can use them today. One of the features that particularly interests me is RGBA colour which still has limited support, but is still worth looking at.

In this article I will explain what it is, and how it can be used with fallback mechanisms to achieve a translucent effect in all major browsers.

You might want to skip to the final work or see the completed demo.

What is RGBA?

The short version: RGBA lets you specify a colour as being translucent (partially transparent).

CSS colour syntax

CSS has a number of ways to specify colours (I'll just hit the highlights here).

Hex

One of the best known methods is hexadecimal. This is represented as a hash sign followed by three numbers, each ranging from 0 to FF.

For example, #00ff56. Here the value is Red 00, Green ff, Blue 56.

RGB

CSS allows the same value to be represented as a set of decimal values. See "Data representation and number systems" if you would like more information on converting between hex and decimal.

Let us revisit our previous example: rgb(0, 255, 56).

We can also use percentages: rgb(0%, 100%, 22%).

RGBA

CSS 3 adds a new syntax, which allows alpha to be specified as well.

rgba(0, 255, 56, 0.5) will set the alpha channel to 50% translucency. Note the addition of the "a" and "0.5" to the code from the previous section.

Using RGBA

Let's dive in with a quick example. Hit View, Source on the demo page to see how it is done.

At the time of writing, browser support for RGBA is pretty weak. Of the major browsers; IE does not support RGBA (including IE8 beta 2), Firefox 3 and newer do, Safari 3.2.1 and the initial release of Chrome do.

If you are using a browser that supports the effect you will see a red block containing two blue blocks. The second block has the alpha channel set to 0.5, so the red background shines through and creates a purple effect.

If support is not present, the second element appears red. This is because CSS error handling rules cause unrecognised properties to be ignored. Effectively, this means the property is not set, so the element remains transparent (the default value) and the background colour of the container shines through entirely.

This isn't a big deal under the circumstances, but imagine if we had a busy background image that did not contrast well with the text.

Providing a fallback colour

All is not lost because CSS cascades. You can respecify a property many times and only one will be applied.

First, let's take a look at another demo.

#alpha {
    background-color: rgb(0%, 0%, 100%);
    background-color: rgba(0%, 0%, 100%, 0.5);
}

This time the background colour is specified twice. First as solid blue, then as translucent blue. If the browser doesn't support RGBA, it will ignore the second declaration and continue to apply the solid version.

Translucency in older browsers

We don't have to stop there. It has been possible to have translucent backgrounds for a while - using images. It just comes at the price of an extra http request and the fiddling around to create the image.

I can't save you the effort of creating an image, but we can use the old technique and still save on the extra HTTP request in RGBA supporting browsers.

Time for another demo.

Creating the image

I said I couldn't save you the effort of creating the image, that might not be entirely true. Here is a handy way to create one quickly from the command line using ImageMagick.

convert -size 1x1  xc:'rgba(0,0,255,0.5)' blue_0.5_pixel.png

We use the program "convert" and tell it we want a 1 pixel by 1 pixel image. Then we specify the colour, and follow it up with the file name. Bingo, the image is ready.

Adding the fallback image with CSS

CSS lacks a means to tell if a property or value is supported. So we have no generic way to say things like "If this background-color is not supported then use this background-image". We do have a specific means though: background.

The background property is a short way to set lots of different properties relating to background colours and images, but the value passed to it is treated as a single value — so error handling will discard the whole thing if any part of it is not supported.

#alpha {
    background: url(blue_0.5_pixel.png);
    background: rgba(0%, 0%, 100%, 0.5);
}

Remember that if you don't specify part of a background property, it is reset to the default. So the second line sets the background-image to "none", but only if the browser supports rgba (otherwise the whole line is ignored).

Summary

• Use RGBA for colours that let the background of the element below shine through
• Use a PNG as fall back for older browsers
• Don't forget to deal with Internet Explorer 6's lack of support for alpha in PNG images