Приднестровская поддержка XOOPS
Отдельные таблицы стилей можно создавать для разных браузеров, а можно ли для разных устройств?
Решение
В спецификации 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 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. В следующем разделе мы
рассмотрим способ его использования для создания версии документа для печати.
Отправитель | Нити |
---|
6 пользователь(ей) активно (1 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 6 далее... |