DekGenius.com
Previous Section  < Day Day Up >  Next Section

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), 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:


caption

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


icon

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


menu

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


message-box

The font styles used to present text in dialog boxes


small-caption

The font styles used for labeling small captioned controls


status-bar

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 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
figs/css2_1301.gif

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

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 analogue with the options in the "Appearance" tab of the Display control panel in Windows 2000, it is noted parenthetically after the description.


ActiveBorder

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


ActiveCaption

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


AppWorkspace

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").


Background

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


ButtonFace

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


ButtonHighlight

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.


ButtonShadow

The shadow color for three-dimensional display elements.


ButtonText

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


CaptionText

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").


GrayText

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


Highlight

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


HighlightText

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


InactiveBorder

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


InactiveCaption

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


InactiveCaptionText

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


InfoBackground

The background color in tooltips (the first color in "ToolTip").


InfoText

The text color in tooltips (the font color in "ToolTip").


Menu

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


MenuText

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


Scrollbar

The "gray area" of a scrollbar.


ThreeDDarkShadow

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


ThreeDFace

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


ThreeDHighlight

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


ThreeDLightShadow

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


ThreeDShadow

The dark shadow found on three-dimensional display elements.


Window

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


WindowFrame

The color applied to the frame of a window.


WindowText

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. 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.

    Previous Section  < Day Day Up >  Next Section