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