|
|
< Day Day Up > |
|
13.1 System Fonts and ColorsThere may be times when you want your document to mimic the user's computing environment as closely as possible. An obvious example is if you're creating web-based applications, where the goal is to make the web component seem like a part of the user's operating system. While CSS2 doesn't make it possible to reuse every last aspect of the operating system's appearance in your documents, you can choose from a wide variety of colors and a short list of fonts. 13.1.1 System FontsLet's say you've created an element that functions as a button (via JavaScript, for example), and you want it to look just like a button in the user's computing environment. By doing so, you make the control more usable by meeting the user's expectations of how a control should look. 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 would 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, then the user agent should use a "user agent default font" instead. 13.1.2 System Colors
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 <color> 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 analogue 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. Doing so 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, avoiding text that reads "Look for the text whose color matches your desktop" is a bad idea, since the user may have placed a desktop graphic (or "wallpaper") over the default desktop color. |
|
|
< Day Day Up > |
|
