How to Use Operating System Styles in CSS

Contributing Editor

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.


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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.deanclatworthy.com Dean C

    I don’t think so. A browser window to me is a shell, it’s my job to make things look nice within that shell. Blending in to the surrounding shell is not something I want to do.

  • 1

    Very interesting article but I really don’t see how this can fit in some nice looking web page. I even use custom checkboxes! I want to use custom scrollbars even… that time is not now, but it will come.
    Web pages should look well designed and developed good, if any user specified something for his OS it does’t mean it will fit in any place inside the web page.

  • https://twitter.com/scotthoff scotthoff

    Well it is interesting.

  • neal kernohan

    Browsers not only support websites, they also support thousands of web applications used in corporate environments. Many of these clients want these applications to look, feel and perform like desktop apps. This helps many designers do exactly that.

  • http://www.brothercake.com/ brothercake

    Hell yeah, I use this stuff all the time.

    #1 most useful application is custom tooltips:

    #tooltip
    {
    position:absolute;
    display:block;
    background:InfoBackground;
    color:InfoText;
    font:small-caption;
    padding:2px 2px 2px 4px;
    border:1px solid;
    border-color:ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
    max-width:200px;
    }

  • http://www.brothercake.com/ brothercake

    I even use custom checkboxes!

    Well frankly, you shouldn’t. The more uniform you can make your interface, the better its usability. It’s one of the major problems with web applications in general, that each one has a unique-looking interface. It’s all very well to make things look pretty, but to a signficant extent, you do so at the expense of your users.

  • ramnath

    Thanks Craig for sharing this.

    Yes, I see on possible use for this:

    May be an online ‘help’ for a desktop application simulating its interface, as seen on user’s OS.

    Counter Argument:
    It can be done in much better and interactive ways like Adobe Captivate! :)

  • Anonymous

    What’s the browser support for these properties?

  • http://www.optimalworks.net/ Craig Buckler

    All the mainstream modern browsers support the properties. Many older browsers do too, including IE6. However, I would suggest you check your target OS/browser combinations to be absolutely certain.

  • Connor

    This is exactly what I was looking for. These properties are perfect for web-app GUIs, as anything that blends the app interface with the client OS is a good thing for the user experience.

    Any idea how these are handled on mobile browsers?

  • http://www.brothercake.com/ brothercake

    An interesting additional note here is that what you mention as a caveat:

    There is nothing to prevent the user defining unusual, clashing, or ugly color schemes in their OS

    Is also a major reason for using them, if you look it at the other way. It means that for users who need specific color schemes – like high contrast black and yellow – their color schemes will be reflected in the interface, if it uses these system properties.

  • http://thetypehouse.co.uk/ TheTypehouse

    Thanks, Craig. This looks interesting, and I can see that it could be especially so for use with web apps.

    BTW, there’s a typo in the sentence “They are shown in CamalCase for legibility” (should read “CamelCase”). :-)

  • Aroeira

    Thanks, Craig. Very useful information

  • http://www.jasonbatten.com NetNerd85

    Maybe useful for Adobe AIR applications…?