Section 13.1. System Fonts and Colors

13.1. System Fonts and Colors

There 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 Fonts

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:


The font styles used for captioned controls, such as buttons and drop-downs


The font styles used to label operating system icons, such as hard drives, folders, and files


The font styles used for text in drop-down menus and menu lists


The font styles used to present text in dialog boxes


The font styles used for labeling small captioned controls


The font styles used for text in window status bars

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.

13.1.2. System Colors

As of this writing, the working draft of the CSS3 Color module deprecates the system color keywords in favor of the new property appearance. Similarly, CSS2.1 deprecates these keywords in anticipation of changes in CSS3. Authors are strongly encouraged not to use the system colors, as they are not likely to appear in future versions of CSS. This information is included because some currently available browsers do support 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 analog with the options in the "Appearance" tab of the Display control panel in Windows 2000, it is noted parenthetically after the description.


The color applied to the outside border of an active window (the first color in "Active Windows Border").


The background color of the caption of the currently active window (the first color in "Active Title Bar").


The background color used in an application that allows multiple documents e.g., the background color "behind" the open documents in Microsoft Word (the first color in "Application Background").


The background color for the desktop (the first color in "Desktop").


The color used on the "face" of a three-dimensional button.


The highlight color found on the edges of three-dimensional display elements that face away from the virtual light source. Thus, if the virtual light source is located in the upper left, this would be the highlight color used on the right and bottom edges of the display element.


The shadow color for three-dimensional display elements.


The color of text found on push buttons (the font color in "3D Objects").


The color of text found in captions, the size box, and the symbol in a scrollbar arrow box (the font color in "Active Title Bar").


The grayed (disabled) text. This keyword is interpreted as #000 if the current display driver does not support a solid gray color.


The color of item(s) selected in a control (the first color in "Selected Items").


The text color of item(s) selected in a control (the font color in "Selected Items").


The color applied to the outside border of an inactive window (the first color in "Inactive Window Border").


The background color of the caption of an inactive window (the first color in "Inactive Title Bar").


The color of text in an inactive caption (the font color in "Inactive Title Bar").


The background color in tool tips (the first color in "ToolTip").


The text color in tool tips (the font color in "ToolTip").


The color of a menu's background (the first color in "Menu").


The color of text found in menus (the font color in "Menu").


The "gray area" of a scrollbar.


The same color as a dark shadow found on three-dimensional display elements.


The same color as the face of three-dimensional display elements.


The color of highlights found on three-dimensional display elements.


The light color found on three-dimensional display elements (for edges facing the light source).


The dark shadow found on three-dimensional display elements.


The color in the background of a window (the first color in "Window").


The color applied to the frame of a window.


The color of text in windows (the font color in "Window").

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.

CSS(c) The Definitive Guide
CSS: The Definitive Guide
ISBN: 0596527330
EAN: 2147483647
Year: 2007
Pages: 130
Authors: Eric A. Meyer

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: