[timoxa]

Стили для разных устройств
При подключении каскадных таблиц стилей в html возможно подключить отдельные стили для разных типов устройств. Но не все знают как это сделать. Аттрибут media тега link позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др.
Перечень значений для аттриубута media и список устройств, для которых данное значение будет работать.

1. all -Все типы. Это значение используется по умолчанию.
2. aural -Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
3. embossed - Используется для принтеров на системе Брайля
4. braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
5. handheld - Наладонные компьютеры(КПК) и аналогичные им аппараты.
6. print - Печатающие устройства вроде принтера.
7. projection - Проектор.
8. screen - Экран монитора.
9. tv - Телевизор.

Подключение стилей в html

В html задать использование разных стилей для разных устройств можно следующим образом:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Если же нужно указать больше утстройств, для которых применяется данный стиль то указывать их нужно через запятую

<link rel="stylesheet" type="text/css" href="print.css" media="print,projection">

Подключение стилей в css файле

Такая же штука возможна и с файлом каскадных таблиц стилей (CSS). В ксс есть поддержка задавать различные правила, использую @. Допустим, @font-face позволит подгружать свои собственные шрифты с сервера.
А вот @media позволяет указать типы устройств и описать стиль для определенного селектора. Т.е. в ксс это делается так:

@media screen
   {
   p.test {font-family:verdana,sans-serif;font-size:14px;}
   }

Если нужно опять же для нескольких устройств пишем следующим образом:

@media screen,print
   {
   p.test {font-weight:bold;}
   }

Как проверить ?
Предположим вы написали стили файлов для обычного отображения страницы и для принтеров (media=”print”). А у вас нет принтера, но проверить позарез нужно. То просто берем print заменяем на screen. Небольшой обман браузера и вы увидете, как стиль будет работать для принтеров. Но не забудьте вернуть назад!