В CSS 2.1 появилась одна интересная фича, о которой не все знают — это возможность задавать на веб-странице шрифты и цвета, которые используются в текущей системной теме операционной системы.
Это может быть полезно в ситуациях, когда вы хотите приблизить интерфейс вашей страницы к пользовательскому интерфейсу операционной системы. Например, вы хотите написать Adobe AIR приложение, или сделать справочный интерфейс, наподобие нативной chm-справки (вот как здесь: manual.pohape.ru).
На самом деле, все очень просто и без всякой магии. Мы воспользуемся стандартными css-свойствами с немного нестандартными значениями.
Системные шрифты задаются обычным свойством font всего с одним параметром — тип шрифта. Разумеется, тип начертания, размер и прочие атрибуты уже содержатся внутри этого параметра.
Пример использования:
Полная таблица всех доступных значений:
Системные цвета могут быть назначены для любого свойства, поддерживающего значение color.
Пример использования:
Полная таблица всех доступных значений:
Это может быть полезно в ситуациях, когда вы хотите приблизить интерфейс вашей страницы к пользовательскому интерфейсу операционной системы. Например, вы хотите написать 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 | Текст внутри окон |