How to Use Operating System Styles in CSS

One of the lesser-known features of CSS2.1 is the ability to define fonts and colors that are in use by the underlying Operating System theme. This can be useful in situations when you require tighter OS integration, e.g. HTML help files, Adobe AIR or perhaps offline web applications. Before we begin, there are a few caveats:

• Do not rely on these properties working in all OS/browser combinations. If your application must work in Opera on BeOS, then I’d recommend you test it first!
• The properties have been deprecated in CSS3 in favor of the appearance value type (although browser support is extremely limited at this time).
• There is nothing to prevent the user defining unusual, clashing, or ugly color schemes in their OS. Pages will reflect their choices — not your designer’s.

System Fonts

System fonts are assigned using the ‘font’ property. Note that the family, size, and style are all assigned as appropriate, e.g.

body
{
	font: caption;
}

The following font values are available. The ‘Example’ column shows the current font set by your OS.

Property	Description	Example
caption	Controls font (buttons, drop-downs, etc.)	ABC abc 123
icon	Icon label font	ABC abc 123
menu	Menu font	ABC abc 123
message-box	Dialog box font	ABC abc 123
small-caption	Small control labels	ABC abc 123
status-bar	Status bar font	ABC abc 123

System Colors

System colors can be assigned to to any property that expects a color value, e.g.

body
{
	color: WindowText;
	background-color: Window;
	border: 2px solid ActiveBorder;
}

The following color values are available. They are shown in CamelCase for legibility, but any casing is valid. The ‘Example’ column shows the color set by your OS.

Property	Description	Example
ActiveBorder	Active window border
ActiveCaption	Active window caption
AppWorkspace	Background color of multiple document interface
Background	Desktop background
ButtonFace	Face color for 3D display elements
ButtonHighlight	Dark shadow for 3D display elements (facing away from light)
ButtonShadow	Shadow color for 3D display elements
ButtonText	Text on push buttons
CaptionText	Text in caption, size box, and scrollbar arrow box
GrayText	Grayed (disabled) text (#000 if not supported by OS)
Highlight	Item(s) selected in a control
HighlightText	Text of item(s) selected in a control
InactiveBorder	Inactive window border
InactiveCaption	Inactive window caption
InactiveCaptionText	Color of text in an inactive caption
InfoBackground	Background color for tooltip controls
InfoText	Text color for tooltip controls
Menu	Menu background
MenuText	Text in menus
Scrollbar	Scroll bar gray area
ThreeDDarkShadow	Dark shadow for 3D display elements
ThreeDFace	Face color for 3D display elements
ThreeDHighlight	Highlight color for 3D display elements
ThreeDLightShadow	Light color for 3D display elements (facing the light)
ThreeDShadow	Dark shadow for 3D display elements
Window	Window background
WindowFrame	Window frame
WindowText	Text in windows

Would these properties be useful in your next project?

Frequently Asked Questions about CSS System Styles