Куда вставлять CSS

CSS весьма снисходителен. Если браузеру встречается неизвестный селектор или атрибут — он просто будет игнорировать его. И далее нам это очень пригодится.

Ранее мы рассматривали многие стандарты мобильного мира CSS, а также затрагивали CSS-расширения доступные для WAP CSS. Решим мы использовать CSS 2.1, CSS 3.0, CSS Mobile Profile, WAP CSS или расширения WebKit — не важно, потому что мы будем использовать все теже CSS селекторы и атрибуты для этих селекторов. Стандарты просто говорят нам, какие из них поддерживаются. Более того, мы встретим такие мобильные браузеры, где стандартные стили не поддерживаются, а с нестандартными наоборот все отлично.

Если ты заинтересован в W3C-валидной разметке, помни что стандарт XHTML Basic 1.0 не поддерживает CSS, а в версии 1.1 уже есть поддержка, но только для <style> или тега <link> с внешними стилями. W3C стандарты не поддерживают определенные правила внутренних стилей определенных через <style>. И вообще, если честно, в реальном мире мы не так уж беспокоимся о стандартах в CSS — мы просто сделаем все, чтобы создать таблицу стилей с максимальной совместимостью и в ней по умолчанию будут официальные нестандартные расширения.

Помни, что не существует специального типа MIME, файлового расширения или тега XHTML для мобильного CSS.

Первый вопрос: где именно нам нужно сказать браузеру, что нужно применять стили? У нас есть много вариантов:

• <style> теги в XHTML или HTML разметке;
• внешние стили в виде файлов .css;
• атрибуты style внутри тегов.

Третий вариант может показаться самым эффективным, но это не так. Хотя есть моменты, когда такое решение действительно приносит пользу. В случае с расширениями CSS WAP для элементов форм (обсуждали их в главе 6), легче всего вставить встроенные стили чтобы избежать определения id и правил для него:

<input type="text" name="name" style="-wap-input-format: A*a" />

На устройствах BlackBerry с программным обеспечением Device Software 4.5 (или более ранние его версии) таблицы стилей могут быть отключены самим браузером или же исходя из корпоративной политики.

Четвертый вариант — новый способ включения внешних таблиц стилей — входит в стандарт WAP CSS, но на самом деле он полностью не реализован и не рекомендуется к применению, потому как ощутимых преимуществ он не дает. Код выглядит так:

<?xml-stylesheet href="style.css" media="handheld" type="text/css" ?>

Если разрабатываемый тобой сайт состоит из одного одно-страничного документа (это может быть виджет, мобильное Ajax-приложение или простой мобильный документ), то быстрее и лучше будет встроить CSS при помощи XHTML тега <style>, что поможет избежать лишнего запроса и задержки рендеринга. Еще одна идеальная ситуация для такого варианта — если главная страница на сайте очень отличается от остальных. Если же ситуация противоположная, то, вполне возможно, что внешние таблицы стилей подойдут гораздо лучше.

Медиа-фильтрация

Достаточно ли одной таблицы стилей для всех устройств сразу? Возможно. Первый важный момент, который нам нужно учесть, чтобы получить ответ — мы разрабатываем декстопный XHTML-сайт или же специально мобильную версию.

Декстопные сайты

Если мы хотим использовать единый XHTML сайт (без создания отдельной мобильной версии) и для настольных и для мобильных устройств, то у нас есть единственный вариант, как изменить дизайн и разметку — это файл CSS. Такая ситуация отлично подходят для применения атрибута media.

Стандарт CSS позволяет нам для одного документа определять более одной таблицы стилей, учитывая возможности носителей на которых будет отображаться сайт. Наиболее часто для атрибута media используются значения screen (для декстопа), print (применяется, когда пользователь распечатывает документ) и handheld (да, это для мобильных устройств). Есть и другие значения, такие как tv и braille, но в настоящий момент нет браузеров, которые их поддерживают.

Отлично! Мы нашли решение. Теперь нам нужны две таблицы стилей — одна для screen и вторая для handheld и все наши проблемы будут решены. Эти две таблицы стилей могут для одних и тех же элементов определить разные свойства и мы можем использовать display: none чтобы запретить демонстрацию некоторых элементов на мобильных устройствах:

<link rel="stylesheet" type="text/css" media="screen" href="desktop.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

Но, когда мы переходим к тестированию вся эта «идеальная» ситуация становится настоящим адом. Многие мобильные браузеры основываются на screen таблице стилей потому что они могут обеспечить рендеринг любого декстопного веб-сайта. Другие браузеры используют screen когда они «думают» что это декстопный веб-сайт и, соответственно, handheld когда думают, что это мобильный веб-сайт и здесь все зависит от DOCTYPE, мета тегов или настроек просмотра пользователя.

Чтобы еще больше усложнить ситуацию следует учесть, что некоторые мобильные браузеры (например, Mobile Internet Explorer) используют media="handheld" в случае если это единственное определенное значение, но если определены оба значения — используется media="screen".

В таблице 7.1 показаны, какие значения media выбираются браузерами, когда в документе выбраны обе опции — screen и handheld. Понятное дело, что мы не можем реально рассчитывать на атрибут media="handheld".

Media queries

CSS3 приходит нам на помощь вместе с media queries. Комплексное определение media включает в себя условия о размере экрана и допустимом значении media.

Например, мы можем сказать: «Нужно применять эти таблицы стилей для устройств поддерживающих screen с максимальной шириной устройства 480». Такое условие подходит и для iPhone, потому что в альбомном режиме ширина экрана у него 480 пикселей и он не поддерживает print, handheld или любой другой media-тип. Описывается это как условный media queries:

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

Для не-iPhone декстопных устройств мы можем поставить условие: «Эти таблицы стилей нужно применять для браузеров, которые поддерживают хотя бы screen и ширина экрана в которых не менее 481 пикселя». Описывается этот запрос так:

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

Internet Explorer (до 8-й версии) не понимает CSS media queries и поэтому будет применять по умолчанию таблицы стилей iPhone. Поэтому для IE мы должны добавить условные комментарии:

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" />
<!--<![endif]-->

Некоторые браузеры понимают CSS media queries внутри самого файла таблиц стилей. Например, следующий код меняет цвет фона на экране iPhone (или на другом похожем устройстве):

		@media only screen and (max-device-width: 480px) {
		body {
		background-color: red;
		}
		}
		

Расширения для условных media queries — это media queries orientation, который позволяет нам назначать стили для разных расположений экрана. Здесь есть два возможных варианта: orientation:portrait и orientation:landscape. Для мобильного устройства работающего на программном обеспечении iOS 3.2 (или более поздних версиях) мы можем следующим образом использовать media queries orientation:

		<link rel="stylesheet" media="all and (orientation:landscape)" href="land.css" />
		<link rel="stylesheet" media="all and (orientation:portrait)" href="port.css" />

iPhone 4 и Pixel-Ratio

В iPhone 4 экран 326-DPI — двойной по размерам родной экран iPhone. Это значит, что при том же самом физическом размере экрана в нем при этом двойная высота и ширина. Именно поэтому в Apple решили дать своему браузеру те же самые CSS, область просмотра, JavaScript размеры, что и в low-DPI устройстве, с размерами 320×480 и задали коэффициент пропорциональности равным 2. Это означает что для отображения одного пикселя изображения будет задействовано 4 пикселя на экране. Таким образом твой сайт будет отображаться одинаково и в iPhone 4 и iPhone 3GS. Если же для iPhone 4 ты хочешь сделать что-то отдельное (например high-DPI изображение) — ты можешь использовать новое media query условие -webkit-min-device-pixel-ratio:

		<link media="all and (-webkit-min-device-pixel-ratio:2)"
href="iphone4.css" type="text/css" rel="stylesheet" />

orientation query также работает в Android 2.0 и выше, в MicroB для устройств MeeGo вроде Nokia N900 и в Firefox Mobile. В таблице 7.2 приведен полный перечень браузеров, в которых есть поддержка CSS media queries и orientation.

По теме

• Встроенные стили
• Вложенные таблицы стилей
• Внешние таблицы стилей
• Группируем CSS. Директива @import

Куда дальше

• следующая — Селекторы
• предыдущая — Глава 6. Написание разметки. Плагины и расширения
• содержание