CSS: The Definitive Guide, 3rd Edition (59 page)

Let's say you've created an element that functions as a
button (via JavaScript, for example). By making the control look just like a button
in the user's computing environment, you meet the user's expectations of how a
control should look and thus make it more usable.

To accomplish the given example, simply write a rule like this:

a.widget {font: caption;}

This will set the font of any
a
element with a
class
of
widget
to use the same font family, size, weight, style, and variant as
the text found in captioned controls, such as a button.

CSS2 defines six system font keywords. These are described in the following list:

It's important to realize that these values can be used only with the
font
property and are their own form of shorthand. For
example, let's assume that a user's operating system shows icon labels as 10-pixel
Geneva with no boldfacing, italicizing, or small-caps effects. This means that the
following three rules are all equivalent, and have the result shown in
Figure 13-1
:

body {font: icon;}
body {font: 10px Geneva;}
body {
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 10px;
font-family: Geneva;
}

Figure 13-1. Making text look like an icon label

So a simple value like
icon
actually embodies a
whole lot of other values. This is fairly unique in CSS, and it makes working with
these values just a little more complex than usual.

As an example, suppose you want to use the same font styling as icon labels, but
you want the font to be boldfaced even if icon labels are not boldfaced on a user's
system. You'd need a rule with the declarations in the order shown:

body {font: icon; font-weight: bold;}

By writing the declarations in this order, you cause the user agent to set the
body
element's font to match icon labels with
the first declaration, and then modify the weight of that font with the second. If
the order were reversed, then the
font
declaration's value would override the
font-weight
value from the second declaration, and the boldfacing would be lost. This is similar
to the way shorthand properties (like
font
itself)
must be handled.

You may be wondering about the lack of a generic font family, since it's usually
recommended that the author write something like
Geneva
,
sans-serif;
(in case a user's
browser doesn't support the specified font). CSS won't let you "tack on" a generic
font family, but in this case, it isn't needed. If the user agent manages to extract
the font family used to display something in the computing environment, then it's a
pretty safe bet the same font is available for the browser to use.

If the requested system font style is not available or can't be determined, the
user agent is allowed to guess at an appropriate set of font styles. For example,
small-caption
might be approximated by taking
the styles for
caption
and reducing the font's
size. If no such guess can be made, the user agent should use a "user agent default
font" instead.

If you want to reuse the colors specified in the user's operating system, CSS2
defines a series of system color keywords. These are values that can be used in any
circumstance where a

value is
allowed. For example, you could match the background of an element with the user's
desktop color by declaring:

div#test {background-color: Background;}

Thus, for example, you could give a document the system's default text and
background color like this:

body {color: WindowText; background: Window;}

Such customization increases the odds that the user will be able to read the
document, since he has presumably configured his operating system to be usable. (If
not, he deserves whatever he gets!)

There are 28 system color keywords in total, although CSS does not explicitly
define them. Instead, there are some generic (and very short) descriptions of each
keyword's meaning. The following list describes all 28 keywords. In cases where there
is a direct analog with the options in the "Appearance" tab of the Display control
panel in Windows 2000, it is noted parenthetically after the description.

CSS2 defines the system color keywords to be case-insensitive but recommends using
the mixed capitalization shown in the previous list, which makes the color names more
readable. As you can see,
ThreeDLightShadow
is
easier to understand at a glance than
threedlightshadow
.

An obvious drawback of the vague nature of the system color keywords is that
different user agents may interpret the keywords in different ways, even if the user
agents are running in the same operating system. Therefore, don't rely absolutely on
consistent results when using these keywords. For example, avoid text that reads,
"Look for the text whose color matches your desktop", since the user may have placed
a desktop graphic (or "wallpaper") over the default desktop color.