How 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: ).

    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:

        font: menu;

    captionFont on controls (buttons, radio, drop-down lists)
    iconFont for icons
    menuFont used in system menus
    message-boxDialog Font
    status-barFont 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:

        color: WindowText;
        background-color: Window;

    ActiveborderActive window frame color
    ActivecaptionActive window title color
    AppworkspaceBackground color in MDI applications
    BackgroundDesktop background
    ButtonFaceFront color for 3d elements (e.g. buttons)
    ButtonhighlightShadow color in 3d elements in the "face to the light" position
    ButtonShadowShadow color for 3d elements
    ButtonTextThe text of the pressed button
    CaptionTextLabel text color
    GraytextInactive (locked) text color
    HighlightColor of the selected menu item
    HighlighttextThe color of the text inside the element under the selection
    InactiveborderInactive window frame
    InactivecaptionInactive window title color
    InactiveCaptionText Text inside an inactive window title
    InfobackgroundBackground color for information tooltips (tooltips)
    InfoTextText inside tooltips
    MenuBackground color of menu items
    MenuTextMenu text color
    ScrollbarScrollbar color
    WindowBackground color of windows
    Windowframexs;) (maybe they will prompt in the comments)
    WindowtextText inside windows

    Also popular now: