How to Use Operating System Styles in CSS

    Craig Buckler

    CSS system stylesOne 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.

    	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.

    	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?