CSS3 Color

This presentation uses some CSS3 to define color for the topic list. While not necessary, it was done both as a demonstration of how to utilize rgba() colors, as well as the desire to have the color blend in with whatever background is being used, even if it's not a solid color.

As of this writing, Safari is the only browser which supports CSS3 rgba() colors. When you check your CSS syntax with the W3C CSS Validation Service, any rgba() colors will show up as errors since the checker only understands CSS2 syntax.

rgba() Colors

The colors used in most of this presentation use the hexadecimal format, such as #000 (black) or #494 (greenish grey); these are actually shorthand for #000000 and #449944 respectively. Another method for specifying colors is to use the rgb() syntax, which would be rgb(0,0,0) and rgb(68,153,68) for our two examples (68 and 153 being the decimal equivalents of 44 and 99 hexadecimal).

The rgba() method is similar to rgb() but it adds a fourth number which represents the alpha channel. This alpha channel specifies the transparency of the color, ranging from 0.0 (completely transparent) to 1.0 (fully opaque).

grey text on several colorsThe image on the right shows how two kinds of grey, rgb(127,127,127) and rgba(0,0,0,0.5), show up against other colors. On a white background, the two look the same, and in fact end up being the same color, since the rgba() value mixes half black and half white to get grey.

Against the grey background, the rgba() value mixes half black and half grey to get a dark grey, while the rgb() value blends in and the text can't be read. With the black background, the rgb() text is visible, but not the rgba() text since it's blending black and black.

With the green background, the rgba() text takes on some of the color from the background, which is rgb(0,128,0). The equivalent rgb() color would be rgb(0,64,0).

text on color bandsWhere rgba() becomes very interesting is when it's on top of something which isn't solid. The image on the right uses text with a color of rgba(255,255,255,0.5) against color bands. As you can see, the color is visible through the text.

Alpha channel values other than 0.5 can be used - the closer to 0.0 the alpha value, the more the background will show through.

Border and background colors can also use rgba() values for browsers which support that color method.

Backwards-Compatible rgba() Usage

If you use rgba() values, you need to make sure that you also supply colors which will work with older browsers. For this presentation, colors aren't exactly matched, but are close - since each browser will show one or the other, the difference wouldn't be apparent unless windows from two different browsers are set side-by-side and even then they may well be too close to differentiate.

Normally what you can do is first define the compatible color and then the new color, since CSS parsers are supposed to ignore values they don't understand. That way the newer browsers will see the change to the new color, but the older browsers will skip past the rgba() value.

We cannot use this technique, however, since Internet Explorer for Windows will interpret any unrecognized values as black. Therefore, we need to use two CSS rules to set the color:

ol#topics {
    color: #888;
html>body ol#topics {
    color: rgba(0,0,0,0.5);

Since IE/Windows does not understand CSS selectors, it ignores the entire second rule. Other browsers which understand CSS2 selectors but not CSS3 colors will ignore the color setting.

Using Cascading

The way we use the topic list, individual pages override the color for the current item. This is done with:

ol#topics li#curtopic {
    color: black;

Notice we do not also set a CSS3 color, nor do we repeat a rule with html>body in the selector. This is because two items with id selectors has a higher weight than the rule with three selectors but only one id.