Оглавление

Создание отдельных таблиц стилей для различных устройств

Отдельные таблицы стилей можно создавать для разных браузеров, а можно ли для разных устройств?

 

Решение
В спецификации CSS2.1 введено понятие среды отображения, которое позволяет веб-разработчикам создавать отдельные таблицы стилей или отвести часть общей таблицы стилей для применения к документу при его отображении различными устройствами.

 

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

<link rel=”stylesheet” type=text/css” href=”screen.css”
media=”screen” />


Для размещенных внутри элемента head правил стилей также можно указать такую метку:

<style type=”text/css” media=”all”>
...
</style>


В обоих примерах значением атрибута media служит название среды отображения, для которой предназначена таблица стилей. Она будет использоваться только устройствами, поддерживающими указанную среду.

 

Обсуждение
В спецификации CSS 2.1 указаны следующие типы среды отображения:

 

allподходит для всех устройств
brailleдля тактильных устройств, например, брайлеровских дисплеев
embossed 
для постраничной печати по системе Брайля
handheldдля портативных устройств (как правило, с небольшим экраном и ограниченной пропускной способностью полосы)
printдля документов с постраничной организацией и документов, отображаемых на экране в режиме предпросмотра перед печатью (Print Preview)
projectionдля презентаций, представляемых с помощью проектора (используется Opera в полноэкранном режиме)
screenпредназначается прежде всего для цветных компьютерных мониторов
speechдля синтезаторов речи (обратите внимание, что в CSS2 с этой целью использовалась среда отображения aural)
ttyдля устройств с фиксированной сеткой символов (телетайпов, терминалов или портативных устройств с ограниченными возможностями отображения); при написании таблицы стилей для данной среды отображения не следует использовать в качестве единицы измерения пикселы
tvдля телевизионных дисплеев (цветных, с низким разрешением, ограниченными возможностями прокрутки и функцией воспроизведения звука)

 

Помимо использования атрибута media, как было описано выше, у разработчика есть возможность указания стилей для различных устройств в единой таблице стилей с помощью правила @media.
Ниже представлен пример применения этого приема на практике.
В рассматриваемой таблице стилей указано, что при печати документа должен использоваться шрифт размером в десять пунктов, а при отображении его на экране – в 12 пикселов. В обоих случаях цвет текста будет черным:


@media print {
body {
font-size: 10pt;
}
}
@media screen {
body {
font-size: 12px;
}
}
@media screen, print {
body {
color: #000000;
}
}


В настоящее время не так много устройств полностью поддерживают различные среды отображения, и метод указания конкретных стилей для различных устройств в будущем, скорее всего, будет заменен модулем запросов среды CSS3. К примеру, Opera Mobile и Safari для iPhone прекратили поддержку среды отображения handheld, поскольку компании-разработчики считают их полнофункциональными браузерами в отличие от типичных маломощных браузеров, установленных на портативных устройствах. Вместо этого они сделали выбор в пользу поддержки запросов среды, что гораздо эффективнее для указания различных стилей для современных мобильных устройств, корректно обрабатывающих CSS-код, но обладающих некоторыми ограничениями, обусловленными небольшим размером экрана.(1)

 

Однако указание различных типов среды все еще остается актуальным; одним из самых полезных и поддерживаемых современными браузерами типов среды отображения является print. В следующем разделе мы
рассмотрим способ его использования для создания версии документа для печати.

Совет
Не нужно начинать с самого начала. При создании таблицы стилей для другой среды отображения проще всего скопировать уже существующий файл и сохранить его под новым именем. Таким образом, все селекторы сразу окажутся у вас под рукой, и останется всего лишь изменить некоторые из указанных для них правил.
Примечания:
  • С помощью запросов среды можно, например, указать определенные правила стилей для устройств с максимальной шириной экрана в 480 пикселов. Более подробную информацию можно получить на сайте Сообщества разработчиков Opera (Opera Developer Community) по адресу http://dev.opera.com/articles/view/op ... -9-5-the-developer-angle/ и на сайте Центра разработчиков Apple Safari (Apple Safari DevCenter) по адресу http://developer.apple.com/safari/.
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити