Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоемко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития. С учетом этого в CSS введено понятие типа носителя, когда стиль применяется только для определенного приспособления. В табл. 3.1 перечислены некоторые типы носителей. Табл. 3.1. Типы носителей и их описание| Тип | Описание |
|---|
all
| Все типы. Это значение используется по умолчанию. | | aural | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. | | braille | Устройства, основанные на системе Брайля, которые предназначены для слепых людей. | | handheld | Наладонные компьютеры и аналогичные им аппараты. | | print | Печатающие устройства вроде принтера. | | projection | Проектор. | | screen | Экран монитора. | | tv | Телевизор. | В CSS для указания типа носителей применяются команды @import и @media, с помощью которых можно определить определенный стиль для элементов в зависимости от того, выводится документ на экран или на принтер. Замечание Ключевые слова @media и @import относятся к эт-правилам. Такое название произошло от наименования символа @ — «эт», с которого и начинаются эти ключевые слова. В рунете для обозначения символа @ применяется устоявшийся термин «собака». Только вот использовать выражение «собачье правило» язык не поворачивается. При импортировании стиля через команду @import тип носителя указывается после адреса файла. При этом допускается задавать сразу несколько типов, упоминая их через запятую, как показано в примере 3.1. Пример 3.1. Импорт стилевого файла <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
@import "/style/main.css" screen;
@import "/style/palm.css" handheld, print;
</style>
</head>
<body>
...
</body>
</html> В данном примере импортируется два файла — main.css предназначен для изменения вида документа при его просмотре на экране монитора, и palm.css — при печати страницы и отображении на КПК. Команда @media позволяет указать тип носителя для таблицы глобальных или связанных стилей и в общем случае имеет следующий синтаксис. @media тип носителя 1 {
Описание стиля для типа носителя 1
}
@media тип носителя 2 {
Описание стиля для типа носителя 2
} После ключевого слова @media идет один или несколько типов носителя, перечисленных в табл. 3.1, если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идет обычное описание стилевых правил. В примере 3.2 показано, как задать разный стиль для печати и отображения на мониторе. Пример 3.2. Стили для разных типов носителей <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
@media screen {
BODY {
font-family: Arial, Verdana, sans-serif;
font-size: 90%;
color: navy
}
H1 {
background: linen;
border: 2px dashed maroon;
color: sienna;
padding: 7px
}
H2 {
color: darkolivegreen;
margin: 0px
}
P {
margin-top: 0.5em
}
}
@media print {
BODY {
font-family: Times, 'Times New Roman', serif
}
H1, H2, P {
color: black
}
}
</style>
</head>
<body>
...
</body>
</html> В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой, например, как это показано на рис. 3.1 и рис. 3.2. 
Рис. 3.1. Страница для отображения в окне браузера 
Рис. 3.2. Страница, предназначенная для печати Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу. Или пойти на хитрость и временно заменить слово print на screen, чтобы отобразить итог в браузере. Именно так был получен рис. 3.2. Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться тегом <LINK> с параметром media, значением которого выступают все те же типы, перечисленные в табл. 3.1. В примере 3.3 показано, как создавать ссылки на CSS-файлы, которые предназначены для разных типов носителей. Пример 3.3. Подключение стилей для разных носителей <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link media="print, handheld" rel="stylesheet" href="print.css" type="text/css">
<link media="screen" rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
...
</body>
</html> В данном примере используются две таблицы связанных стилей, одна для отображения в браузере, а вторая — для печати документа и его просмотре на КПК. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определенных устройств.
| 
