September 3, 2009 at 20:59How to use operating system styles in CSS
CSS 2.1 introduced an interesting feature that not everyone knows about - the ability to set fonts and colors on a web page that are used in the current system theme of the operating system.
This can be useful in situations where you want to bring the interface of your page closer to the user interface of the operating system. For example, you want to write an Adobe AIR application, or make a help interface, like a native chm-help (here it is: manual.pohape.ru ).
In fact, everything is very simple and without any magic. We will use standard css properties with slightly non-standard values.
System fonts are defined by the usual font property with just one parameter - the type of font. Of course, the type of drawing, size and other attributes are already contained within this parameter.
Usage example: Full table of all available values:
System colors can be assigned to any property that supports the color value .
Usage example: Full table of all available values:
This can be useful in situations where you want to bring the interface of your page closer to the user interface of the operating system. For example, you want to write an Adobe AIR application, or make a help interface, like a native chm-help (here it is: manual.pohape.ru ).
In fact, everything is very simple and without any magic. We will use standard css properties with slightly non-standard values.
System fonts
System fonts are defined by the usual font property with just one parameter - the type of font. Of course, the type of drawing, size and other attributes are already contained within this parameter.
Usage example: Full table of all available values:
.menu
{
font: menu;
}
| Value | Description |
|---|---|
| caption | Font on controls (buttons, radio, drop-down lists) |
| icon | Font for icons |
| menu | Font used in system menus |
| message-box | Dialog Font |
| status-bar | Font in the status bar |
System colors
System colors can be assigned to any property that supports the color value .
Usage example: Full table of all available values:
.dialog
{
color: WindowText;
background-color: Window;
}| Value | Description |
|---|---|
| Activeborder | Active window frame color |
| Activecaption | Active window title color |
| Appworkspace | Background color in MDI applications |
| Background | Desktop background |
| ButtonFace | Front color for 3d elements (e.g. buttons) |
| Buttonhighlight | Shadow color in 3d elements in the "face to the light" position |
| ButtonShadow | Shadow color for 3d elements |
| ButtonText | The text of the pressed button |
| CaptionText | Label text color |
| Graytext | Inactive (locked) text color |
| Highlight | Color of the selected menu item |
| Highlighttext | The color of the text inside the element under the selection |
| Inactiveborder | Inactive window frame |
| Inactivecaption | Inactive window title color |
| InactiveCaptionText | Text inside an inactive window title |
| Infobackground | Background color for information tooltips (tooltips) |
| InfoText | Text inside tooltips |
| Menu | Background color of menu items |
| MenuText | Menu text color |
| Scrollbar | Scrollbar color |
| Window | Background color of windows |
| Windowframe | xs;) (maybe they will prompt in the comments) |
| Windowtext | Text inside windows |