Взаимодействие стилей с ОС и устройствами
В этой глааве:
Все уже рассмотренные нами свойства каскадных таблиц стилей были так или иначе связаны непосредственно с отображением документа и явным указаниям по его оформлению. Однако имеются и другие свойства, в частности, варианты шрифтов, зависящих от настроек используемой пользователем операционной системы, или же управляющие видом указателя мышки.
Кроме того, в CSS имеется возможность задавать разные таблицы стилей для разных устройств вывода: одни – для дисплея компьютера, другие – для вывода на печать, третьи – для отображения на портативных устройствах и т.д.
Системные переменные
Поддерживающие CSS браузеры могут выводить документы на основе стилей оформления, имеющихся в ОС посетителя страницы. В CSS 2 предусмотрено использование двух категорий – цветов и шрифтов. Чтобы лучше представить себе, что это за цвета и шрифты, откройте настройки оформления вашей ОС (рис. 3.22).
Рис. 3.22. Настройки оформления в Windows XP
Таким образом, использование системных настроек для оформления позволяет добиться создания страниц, похожих по стилю оформления на обычные программы. Это может быть полезным, например, при разработке стилей для пользовательского Web-интерфейса клиент-серверных приложений.
Все допустимые в CSS 2/2.1 значения для цвета приведены в таблице 3.11, а значения шрифтов – в таблице 3.12.
Значение | Тип цвета в операционной системе |
---|---|
ActiveBorder | Цвет границы активного окна |
ActiveCaption | Цвет заголовка активного окна |
AppWorkspace | Цвет фона MDI-окна |
Background | Цвет фона рабочего стола |
ButtonFace | Цвет "лицевой" стороны объемных элементов |
ButtonHighlight | Цвет насыщенной тени для объемных элементов (ребер, находящихся в тени) |
ButtonShadow | Цвет тени объемных элементов |
ButtonText | Цвет текста на кнопках |
CaptionText | Цвет текста в заголовках, в элементах управления размерами и элементах полосы прокрутки |
GrayText | Цвет отключенного (недоступного) текста |
Highlight | Цвет объектов, выделяемых в элементах управления |
HighlightText | Цвет текста в объектах, выделенных в элементах управления |
InactiveBorder | Цвет границы неактивного окна |
InactiveCaption | Цвет заголовка неактивного окна |
InactiveCaptionText | Цвет текста в неактивном заголовке |
InfoBackground | Цвет фона всплывающей подсказки |
InfoText | Цвет текста всплывающей подсказки |
Menu | Цвет фона меню |
MenuText | Цвет текста в меню |
Scrollbar | Цвет полосы прокрутки |
ThreeDDarkShadow | Цвет насыщенной тени для объемных элементов |
ThreeDFace | Цвет "лицевой" стороны объемных элементов |
ThreeDHighlight | Цвет, используемый при выделении объемных элементов |
ThreeDLightShadow | Светлый цвет объемных элементов (ребер, расположенных "лицом" к источнику света) |
ThreeDShadow | Цвет насыщенной тени для объемных элементов |
Window | Цвет фона окна |
WindowFrame | Цвет рамки окна |
WindowText | Цвет текста в окне |
Следует так же отметить, что все приведенные в таблице 3.11 значения являются самодостаточными, и влияют на все параметры отображения шрифта. Иначе говоря, если для свойства font указано одно из системных значений, то никаких других значений (стиля, гарнитуры) указывать нельзя.
Значение | Соответствующий элемент в оформлении ОС |
---|---|
caption | Шрифт, используемый для заголовков элементов управления (кнопок, выпадающих меню и т.д.) |
icon | Шрифт, используемый для обозначения пиктограмм |
menu | Шрифт, используемый в меню (например, в выпадающих меню и списках меню) |
message-box | Шрифт, используемый в диалоговых окнах |
small-caption | Шрифт, используемый для обозначения небольших элементов управления |
status-bar | Шрифт, используемый в панелях, описывающих статус окон |
Поскольку для полного соответствия пользовательскому оформлению ОС следует указывать как шрифты, так и цвета, то будет правильным решением применять такие значения парами. Например:
div.title {font: caption; color: CaptionText; background: ActiveCaption;}
Пример такого заголовка, а заодно и варианты вывода всех системных шрифтов и цветов можно посмотреть в файле Part_3\Misc\system.html.
Курсоры
Дополнительной возможностью привлечь внимание пользователя к тому или иному элементу на странице можно при помощи изменения внешнего вида указателя курсора. Кроме того, управление видом курсора, подобно применению системных переменных в качестве значений шрифтов и цветов, может помочь сделать Web-приложение более понятным и привычным для пользователя.
Для управления видом курсора используется свойство cursor, которое может принимать одно из стандартных значений – auto, или default. В первом случае вид курсора будет определяться браузером в зависимости от контекста, а во втором курсор примет вид, характерный для обычного указателя мышки в ОС пользователя:
body {cursor: default;}
table {cursor: auto;}
Здесь мы определили, что для документа в целом и всех его элементов курсор должен иметь стандартный для системы вид, а в таблицах он будет контекстно-зависимым.
Кроме двух рассмотренных значений, спецификацией CSS 2 предусмотрено еще 15 определенных видов указателей, а в CSS 3 суммарный список допустимых значений для свойства cursor переваливает за 3 десятка – все возможные значения приведены в таблице 3.13.
ПРИМЕЧАНИЕ
В данном случае мы приведем информацию на основе спецификаций CSS 3, поскольку часть из новых значений уже поддерживается некоторыми программами просмотра, в частности, здесь отличился браузер от Microsoft.
Значение | Примечание | Описание |
---|---|---|
auto | по умолчанию | Браузер пользователя определяет отображаемый курсор, исходя из контекста |
default | CSS 2, все | Курсор, используемый на данной платформе по умолчанию. Обычно представляется в виде стрелки |
crosshair | CSS 2, все | Курсор, представляющий собой простое перекрестие (напоминающее большой символ "+") |
pointer | CSS 2, все | Курсор представляется указателем, обозначающим ссылку |
move | CSS 2, все | Курсор, определяющий объект, который можно переместить |
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize | CSS 2, все | Курсор, определяющий перемещение некоторого края. Например, при перемещении, начинающемся с правого нижнего угла, используется курсор se-resize |
text | CSS 2, все | Курсор, используемый при выделении текста. Обычно представляется в виде вертикальной линии |
wait | CSS 2, все | Курсор, указывающий на занятость программы, когда пользователю необходимо подождать |
help | CSS 2, все | Курсор, означающий, что для объекта, на который он указывает, имеется справочная информации |
progress | CSS 2.1, все | Курсор, указывающий на занятость программы, но взаимодействие с пользователем все равно возможно |
vertical-text | CSS 3, все | Курсор, используемый при выделении вертикально расположенного текста (например, японского) |
all-scroll | CSS 3, все | Курсор, указывающий на то, что объект можно переместить в любом направлении |
col-resize | CSS 3, все | Курсор, указывающий, что ширину колонки можно изменить |
row-resize | CSS 3, все | Курсор, указывающий, что высоту строки можно изменить |
no-drop | CSS 3, все | Курсор, указывающий, что перетаскиваемый объект не может быть помещен в текущем месте |
not-allowed | CSS 3, все | Курсор, указывающий, что запрашиваемое действие недопустимо |
<uri> | только MSIE | Курсор, загружаемый из ресурса, задаваемого этим URI |
context-menu | CSS 3, Opera 9 | Курсор, указывающий, что для элемента доступно контекстное меню |
cell | CSS 3, Firefox 3, Opera 9, Chrome | Курсор, указывающий, что под ним находится ячейка таблицы |
alias | CSS 3, Firefox 3, Opera 9, Chrome | Курсор, указывающий, что под ним находится ярлык (симлинк) / процедура создания ярлыка |
copy | CSS 3, Firefox 3, Opera 9, Chrome | Курсор, указывающий, что элемент можно копировать / процедура копирования при перетаскивании |
ew-resize, ns-resize, nesw-resize, nwse-resize | CSS 3, Firefox 3, Opera 9, Chrome | Курсоры изменения размеров окна |
none | CSS 3, Firefox 3 | Отсутствующий курсор (указатель мышки не отображается) |
Примеры курсоров можно посмотреть, обратившись к файлу cursor.html. Отдельно следует лишь выделить такое значение, как URI. В данном случае, в принципе, допустимо указывать список из нескольких значений, перечисленных через запятую. В результате, если браузеру не удается обработать курсор, расположенный первым в списке, он должен попытаться обработать второй, третий и т.д. Но если не удается обработать ни одного курсора, заданного пользователем, он должен использовать общий курсор, расположенный в конце этого списка:
div.superpointer {cursor: uri('cur1.cur'), uri('cur2.png'), crosshair;}
Здесь браузер должен сначала попытаться отобразить курсор, используя файл cur1.cur, затем, если это по той или иной причине оказывается невозможным, загружается курсор из файла cur2.png, и, наконец, если браузер вновь постигает неудача, то используется курсор типа crosshair. На практике же MSIE не поддерживает перечисления альтернатив через запятую, равно, как и форматы, отличные от CUR/ANI, а остальные браузеры вообще не воспринимают загружаемые из изображений курсоры, и из CSS 2.1 это свойство исключено.
Свойства cursor в CSS
Значение по умолчанию: auto.
Наследуемые значения: да.
Применяется: ко всем элементам.
Совместимость: все (см. примечания по совместимости в табл. 3.13)
Контуры
Помимо курсоров, в таблицах стилей предусмотрена еще одна возможность выделить тот или иной объект на странице, не затрагивая его форматирования на странице. Для этого предусмотрен механизм контуров, задаваемых при помощи свойств группы outline.
В целом – по набору свойств и внешнему облику контуры аналогичны рамкам, и имеют, в общем-то, те же свойства, что и border, а именно: outline-width, outline-style и outline-color. Отличия состоят, прежде всего, в том, что контуры не занимают вообще никакого места на странице, т.е. выводятся как бы над блоком и никак не влияют на его размеры и расположение, равно как и на расположение каких-либо других, смежных блоков. Благодаря этому динамическое отображение или удаление контуров не приводит к переформатированию страницы.
Еще одно отличие контуров от рамок состоит в том, что они всегда одинаковы со всех сторон. В результате мы имеем следующее: свойство outline-width может принимать все те же значения, что и border-width, outline-style – те же, что и border-style, кроме hidden, и outline-color – любые цвета подобно border-color. Впрочем, для outline-color предусмотрено еще одно, дополнительное значение – invert, означающее, что должна быть произведена инверсия цветов всех пикселей по периметру контура. Такой вариант указания цвета гарантирует, что независимо от цвета окружающего фона, границы контура всегда будут видны.
Впрочем, учитывая проблемы с крсс-браузерной совместимостью, обычно лучше все-таки использовать border.
Значение по умолчанию: outline-width – medium; outline-style – none; outline-color – invert.
Наследуемые значения: нет.
Применяется: ко всем элементам.
Совместимость: Opera 7, MSIE 8, Firefox, Chrome. Значение invert не поддерживается Firefox и неверно работает в Chrome.
Типы носителя
Одним из важнейших свойств таблиц стилей является то, что они могут определять представление документа для различных устройств вывода – таких, как монитор ПК, принтер, проектор, телевизор и т.д. Причем ряд свойств CSS имеет смысл только для определенных типов выводящих устройств. Например, свойство page-break-after применимо только к устройствам с постраничной разбивкой, в то время как, скажем, свойство text-align подойдет и для любых других типов устройств визуального отображения информации. Всего в CSS определено 9 групп устройств, все они приведены в таблице 3.14.
Категория | Подходящие типы устройств | Группа по типу форматирования | Группа по типу вывода страниц |
---|---|---|---|
aural, speech | Речевой синтезатор | Звуковое | Без разбивки |
braille | Интерактивные устройства чтения азбуки Брайля | Тактильное | Без разбивки |
embossed | Принтеры, печатающие азбукой Брайля | Тактильное | С разбивкой |
handheld | КПК, «наладонники» | Визуальное, звуковое | Оба варианта |
Принтеры, или вывод документа на экран в режиме просмотра перед печатью | Визуальное | С разбивкой | |
projection | Настенные презентации, печать плакатов | Визуальное | С разбивкой |
screen | Экран монитора ПК | Визуальное, звуковое | Без разбивки |
tty | Устройства с символьным выводом фиксированной ширины (телетайп, ч/б символьный терминал, пейджер) | Визуальное | Без разбивки |
tv | Телевизоры и подобные им устройства | Визуальное, звуковое | Оба варианта |
Для того чтобы указать, что определенный стиль должен применяться только для того или иного типа устройств, используют директиву @media:
@media screen {
body {background: navy; color: white;}
}
Таким образом мы указали, что вложенный в фигурные скобки фрагмент таблицы стилей должен применяться только к выводу на экран монитора ПК. Поскольку в данном случае мы задали светлый текст на темном фоне, то нетрудно догадаться, что при печати браузер заменит цвет фона на белый, а цвет шрифта – на черный. Если требуется вмешаться в этот процесс, то следует добавить специальное правило для принтеров:
@media print {
body {color: navy; background: white;}
}
Теперь цвет шрифта при печати будет темно-синим (разумеется, для того случая, если у пользователя окажется цветной принтер). Что касается цвета фона в целом, то он для принтеров всегда будет белым (вернее, прозрачным), однако для отдельных элементов страницы его вполне можно будет указывать явно. Таким образом, можно избавиться от необходимости добавлять на свои страницы ссылки «версия для печати», а заодно – и от самих дубликатов: убрать все лишнее и вообще как следует приспособить вид страницы для вывода на принтер можно при помощи CSS.
ПРИМЕЧАНИЕ Отметим, что, на самом деле, имеется еще одно значение для директивы @media – all, подразумевающее все возможные устройства вывода. Собственно говоря, когда вы вообще не указываете @media, то, как раз ко всем устройствам, по возможности, и применяются заданные таблицы стилей.
Для примера можно обратиться к файлу media.html – при обычном просмотре в браузере вы увидите белый текст на синем фоне, а открыв окно предварительного просмотра (Mozilla, MSIE 5.5 или выше) или выбрав режим просмотра печати (Opera), будет отображен синий шрифт на белом фоне.
Собственно говоря, подобного можно добиться и при помощи средств языка HTML, воспользовавшись атрибутом MEDIA атрибута STYLE:
<style type="text/css" media="screen">
body {background: navy; color: white;}
</style>
Но на самом деле такой способ гораздо менее удобен с точки зрения использования глобальных таблиц стилей. Собственно, атрибут MEDIA имеется и у элемента LINK:
<link rel="Stylesheet" href="style1.css" type="text/css" media="screen" />
Однако и синтаксис таблиц стилей позволяет внедрять файл со стилями для того или иного типа устройств непосредственно в саму таблицу. Делается это при помощи директивы @import, значение адреса импортируемого файла CSS будет дополнено указанием типа устройства:
@import url("style1.css") screen;
Вообще же тот факт, что тип устройств допускается указывать как в HTML, так и в CSS, с одной стороны, добавляет гибкости, а с другой – повышает требование к внимательности. Например, все 3 правила CSS в следующем фрагменте кода будут проигнорированы:
<style type="text/css" media="print">
@media screen {
p {color: lime;}
h1,h2,h3 {text-align: center;}
blockquote {font-style: italic;}
}
</style>
В данном случае атрибут HTML сообщает браузеру о том, что данная таблица относится к печати, и должна быть проигнорирована при выводе на экран. Когда же дойдет до обработки правил печати, то едва начав анализировать данную CSS, браузер натолкнется на то, что она предназначена для экрана, и, опять-таки проигнорирует ее.
В завершение знакомства с типами устройств следует отметить, что директива @media поддерживается всеми рассматриваемыми браузерами. А что касается особенностей постраничной разбивки, то это – последнее, что нам осталось узнать о каскадных таблицах стилей.
2011-06-24 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !