multimediacollege, Adobe Authorized Training Centre

We all know colour keywords in css, like black, red, aliceblue etc., which can be used to replace hexadecimal codes. There is however a group of keywords which is not often used: the user interface colours. These colours adjust to the colour scheme on the user’s computer. For example, you can display your page in the colour of the user’s desktop. Whenever the user changes the colour of his desktop, the colour of the page will automatically change (except on Mac which makes you reload the page first). So? Nope, not really that interesting, I know, that’s probably why these keywords aren’t used often. That and the fact that you lose control over the appearance of your page. There are however situations in which this possibility can prove to be pretty handy. Consider the following:

You want to make a website with some buttons and elements that might need some extra explanation. As using alttags is not sufficient (you want to control text-styles and add images), you decide to use some simple Javascript roll-over tooltips. Using the UI colour keywords, you can give these tooltips the exact same colour as those on the user’s computer. The effect will be that user will more easily recognise the tooltips as they are similar to those on his own computer, no matter which colour-settings he uses. Simply add the following code to your css:

#tooltip {
background-color: infobackground;
color: infotext;
}

Consider the following example for an illustration of what IU colours are capable of.

As you can see in the example, not only does the colour of the tooltip change along with your computer’s settings, the colour of the Firefox window image also changes, as well as the background colour (along with the background colour of your desktop) and the border of the container <div> (along with the colour of your active border). The Firefox window is a png (or a gif for IE6 or lower), with transparencies where the colours should change. No scripting needed (except for the roll-overs off course), just the right colour keyword. Better yet: this works in most browsers, even the older ones.

There are however two catches: these UI colours are deprecated in CSS3, which uses User Interface Appearance. However, as CSS3 is nowhere near becoming the new standard, this should not pose a problem.

The second catch is Mac: if you change the colour settings on your Mac, you will have to reload the webpage to see the effects. But then again: how many people change the colourscheme on their computer and, moreover, how many do while surfing?

You can find a full list of colours at the W3 site:

http://www.w3.org/TR/WD-CSS2-971104/ui.html

Enjoy