В 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 | Текст внутри окон |
