Кроссдевайсная верстка

В спецификации CSS2.1 определены типы устройств (носителей), для которых применяются стили:

• all — для всех устройств;
• braille — для устройств, которые выводят информацию азбукой Брайля;
• embossed — для устройств печати азбукой Брайля;
• handheld — для мобильных устройств;
• print — для устройств печати и отображения в режиме предпросмотра печати в браузерах;
• projection — для презентаций (проекторов);
• screen — для экранов компьютеров;
• speech — для синтезаторов речи (в CSS 2 — aural);
• tty — для терминалов;
• tv — для телевизоров.

В статьях Печатаем сайты и Печатаем сайты 2 @mihallica писал о стилях для печати. Я же хочу остановится подробнее на особенностях применения стилей для мобильных устройств

1. Теория

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

1. Ограничения разрешения экрана.
2. Ограничения пропускной способности сети (низкая скорость и дороговизна трафика).

Казалось бы все просто – убираешь все лишнее (тяжелые фоновые картинки, различные вспомогательные информационные блоки), размещаешь всю оставшуюся информацию в одну колонку и определяешь для такого стиля тип устройства handheld.

Но проблема в том, что современные мобильные браузеры: Opera Mobile 9.5+, Opera Mini 4+, Safari в айФоне по-умолчанию используют стили с типом screen. Вот как это объясняют разработчики Оперы:

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

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

Но что же делать, если создавая мобильную версию стилей вы не хотите пользователей в чем-то ограничивать функционально, а лишь пытаетесь изменить отображение? В этом нам помогут Media Queries.

Суть в том, что мы подключая какой-либо стиль можем помимо типа устройства добавить дополнительные условия его применения (ширину, высоту, ориентацию экрана, соотношение сторон, поддержка цветов). Полный список параметров и их применение можно найти здесь: Media Queries.

Свежие версии мобильных и настольных браузеров уже поддерживают Media Queries, несмотря на то, что документ находится еще в статусе Candidate Recommendation

2. Практика

Вот так выглядит определение стилей для настольной, мобильной и печатной версии сайта.

<!—- подключаем стили для настольных браузеров Opera, Safari, Firefox, Chrome --> 
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen and (min-width: 601px)" />

<!—- подключаем стили для Internet Explorer --> 
<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<![endif]-->

<!—- подключаем стили мобильной версии --> 
<link rel="stylesheet" type="text/css" href="css/handheld.css" media="handheld, only screen and (max-width: 600px)" />

<!—- подключаем стили печати --> 
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
      
<!—- подключаем стили общие для всех версий --> 
<link rel="stylesheet" type="text/css" href="css/content.css" media="all" />

Разберем код:

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen and (min-width: 601px)" />

Стиль должен применятся для браузеров при ширине отображания не менее 601 пикселя. Вообще правильнее было бы написать media=«only screen and (min-width: 601px)», но тогда бы без стилей остался Firefox (поддержку Media Queries обещают реализовать в следующей версии 3.1/3.5).

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<![endif]-->

Подключаем стили для всех версий Internet Explorer (о поддержке Media Queries пока ничего не известно).

<link rel="stylesheet" type="text/css" href="css/handheld.css" media="handheld, only screen and (max-width: 600px)" />

Подключаем стили для всех мобильных браузеров, а также настольных браузеров с шириной отображения не больше 600 пикселей. Такая ширина выбрана для того, чтобы в нее попали не только мобильные телефоны и КПК, но и нетбуки.

Получаем такой вот результат:

Настольная версия


Печатная версия


Opera Mini


iPhone Safari

3. Тестирование

Отображение в браузере Opera Mini можно проверить здесь:
http://www.opera.com/mini/demo/

Отображение в Opera Mobile и iPhone Safari можно увидеть в настольных версиях этих браузеров просто уменьшив ширину окна (при ширине меньше 601 пиикселя они переключатся на мобильные стили). Кроме того в Опере можно принудительно использовать стили мобильной версии отметив в меню View -> Small Screen.