How to use operating system styles in CSS
In CSS 2.1, there was one 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 your page interface 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 (like this: 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 set with the usual font property with only one parameter — the font type. Of course, the type of style, size and other attributes are already contained within this parameter.
Example of use:
')
Complete table of all available values:
System colors can be assigned to any property that supports the color value.
Example of use:
Complete table of all available values:
This can be useful in situations where you want to bring your page interface 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 (like this: 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 set with the usual font property with only one parameter — the font type. Of course, the type of style, size and other attributes are already contained within this parameter.
Example of use:
')
.menu
{
font : menu;
}
Complete table of all available values:
| 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.
Example of use:
.dialog
{
color: WindowText;
background-color: Window;
}
Complete table of all available values:
| Value | Description |
|---|---|
| ActiveBorder | The color of the active window frame |
| ActiveCaption | Active window title color |
| Appworkspace | Background color in MDI applications |
| Background | Desktop Background |
| Buttonface | The color of the front surface for 3d-elements (for example, buttons) |
| ButtonHighlight | The color of the shadow in the 3d-elements in the position of "face from the light" |
| ButtonShadow | Shadow color for 3d elements |
| ButtonText | Text at the pressed button |
| CaptionText | Label text color |
| Graytext | Inactive (locked) text color |
| Highlight | The 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 caption color |
| InactiveCaptionText | Text inside an inactive window title |
| Infobackground | Background color for tooltips (tooltips) |
| InfoText | Text inside tooltips |
| Menu | Background color of menu items |
| MenuText | Text color inside the menu |
| Scrollbar | Color scrollbar |
| Window | Windows background color |
| Windowframe | xs;) (may prompt in the comments) |
| Windowtext | Text inside windows |
Source: https://habr.com/ru/post/68699/
All Articles