Как использовать стили операционной системы в CSS

    В CSS 2.1 появилась одна интересная фича, о которой не все знают — это возможность задавать на веб-странице шрифты и цвета, которые используются в текущей системной теме операционной системы.
    Это может быть полезно в ситуациях, когда вы хотите приблизить интерфейс вашей страницы к пользовательскому интерфейсу операционной системы. Например, вы хотите написать Adobe AIR приложение, или сделать справочный интерфейс, наподобие нативной chm-справки (вот как здесь: manual.pohape.ru).

    На самом деле, все очень просто и без всякой магии. Мы воспользуемся стандартными css-свойствами с немного нестандартными значениями.

    Системные шрифты


    Системные шрифты задаются обычным свойством font всего с одним параметром — тип шрифта. Разумеется, тип начертания, размер и прочие атрибуты уже содержатся внутри этого параметра.

    Пример использования:

    .menu
    {
        font: menu;
    }


    Полная таблица всех доступных значений:
    Значение Описание
    caption Шрифт на управляющих элементах (кнопки, радио, выпадающие списки)
    icon Шрифт для иконок
    menu Шрифт, используемый в системных меню
    message-box Шрифт в диалоговых окнах
    status-bar Шрифт в строке состояния

    Системные цвета


    Системные цвета могут быть назначены для любого свойства, поддерживающего значение color.

    Пример использования:

    .dialog
    {
        color: WindowText;
        background-color: Window;
    }


    Полная таблица всех доступных значений:
    Значение Описание
    ActiveBorder Цвет активной рамки окна
    ActiveCaption Цвет заголовка активного окна
    AppWorkspace Цвет фона в приложениях с MDI-интерфейсом
    Background Фон рабочего стола
    ButtonFace Цвет лицевой поверхности для 3d-элементов (например кнопки)
    ButtonHighlight Цвет тени в 3d-элементах в положении "лицом от света"
    ButtonShadow Цвет тени для 3d-элементов
    ButtonText Текст у нажатой кнопки
    CaptionText Цвет текста в лейблах
    GrayText Цвет неактивного (заблокированного) текста
    Highlight Цвет выбранного пункта меню
    HighlightText Цвет текста внутри элемента, находящегося под выделением
    InactiveBorder Неактивная рамка окна
    InactiveCaption Цвет неактивного заголовка окна
    InactiveCaptionText Текст внутри неактивного заголовка окна
    InfoBackground Цвет фона для информационных тултипов (подсказок)
    InfoText Текст внутри тултипов
    Menu Фоновый цвет элементов меню
    MenuText Цвет текста внутри меню
    Scrollbar Цвет скроллбара
    Window Фоновый цвет окон
    WindowFrame хз ;) (может в комментариях подскажут)
    WindowText Текст внутри окон
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 22

      +2
      Как это ни странно, я использовал такие цвета года 2-3 назад, в контроле-браузере (т.е. в IE).
      А вот из-за чего от этого отказался — не помню даже.
        +7
        наверное, из-за того, что это работает только в Windows?
        0
        познавательно, спасибо, даже незнал об этом! Работает всех ОС?
          0
          Точно сказать не могу, но вообще должно работать во всех. Дома проверю под линуксом. Может быть обладатели маков тоже посмотрят? :)
          • UFO just landed and posted this here
              0
              OSX 10.5.7, Safari 4 — не работает, странно…
              +1
              Не правда. MacOS X 10.5.8, FF 3.5.2 — показывает не в системных шрифтах, а в тех, что установлены браузером по умолчанию (прописаных в about:config)
            +3
            Очень полезно ознакомиться сперва с этой книжкой. Правда. Там и про проекторы ещё есть, и про печать. Очень полезно )
              +7
              Забавно, все статьи о CSS на хабре начинаются фразой «интересная фича, о которой не все знают».
                +4
                все же Хабр — неиссякаемый кладезь знаний… )
                  +2
                  скорее CSS — неиссякаемый кладезь фич :)
                +4
                Ubuntu 9.04: Firefox 3.5, Opera 10, Chrome 4 — работает
                • UFO just landed and posted this here
                    +2
                    style.png - image uploaded to Picamatic
                      +3
                      Забавно, если перейти по ссылке "что-то такое" можно увидеть снизу скриншот «Галлереи гаджетов» с Windows 7 с подписью «так делать нельзя» :)
                      +1
                      Безотносительно к автору топика — предлагаю прочитать спецификацию CSS2.1 от корки до корки и выступить с докладом «Что еще не все знают». Хотя упомянутая книга Мейера тоже сгодится. Будет интересно.
                        +2
                        Вот спасибо! Вот так открытие!
                        • UFO just landed and posted this here
                            +1
                            Использование этой возможности уместно скорее при разработке web-app, где удобно и иногда правильно делать дизайн так, чтобы он соответствовал используемой операционной системе. Для сайта компании, например, это и не нужно, да и вряд ли кто-то будет использовать.
                            • UFO just landed and posted this here
                                +1
                                И что в нем будет странного? Окна, которые выглядят почти так же, как и окна остальных оффлайн-приложений в системе? Если есть идея и необходимость приблизить внешний вид приложения к тому виду, который максимально привычен рядовому пользователю, то описанные переменные дают хорошую возможность реализовать это. И эффект приложения, конечно, не зависит от использования описанной фичи CSS.

                                P.S. К примеру о слепой секретарше добавлю: она скорее всего и страницы в браузере сильно масштабирует, так что любой сайт на ее компьютере скорее всего будет выглядеть несколько не так, как планировал дизайнер (редкий сайто выдержит нормально масштаб 500%), да и многие программы будут выглядеть «странно». Поэтому пример с увеличением шрифта и последствиями этого не является доводом против использования описанной возможности.
                            –2
                            Wow! Круто.

                            Only users with full accounts can post comments. Log in, please.