CSS для мобильных

Автор: Анна Лысак и Татьяна Головко Дата публикации: 06.06.2011

И в мобильных и в обычных браузерах есть одна особенность, которая значительно облегчает нашу жизнь. Если мы используем какой-нибудь селектор или атрибут, который браузер не понимает, то он его в таком случае просто игнорирует. Дальше ты поймешь, насколько это для нас важно. При использовании СSS 2.1, CSS 3.0, CSS Mobile Profile и WAP CSS все аналогично, мы определяем селекторы и атрибуты для этих селекторов. Стандарты просто дают нам понять, какие селекторы и атрибуты поддерживаются (или должны поддерживаться) в браузере. Но при этом есть как браузеры с отличной поддержкой стандартов, так и наоборот.

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

WCSS или WAP CSS (стандарт OMA, поддерживается XHTML MP) является подмножеством CSS 2.0, такой же как CSS MP (стандарт W3C, поддерживается XHTML Basic). Именно поэтому мы сосредоточимся на функциях CSS 2.0. Мы поговорим в целом о «мобильном CSS» и разберемся, как различные мобильные браузеры обрабатывают каждую из этих функций.

Расширения WCSS

Стандарт Open Mobile Alliance добавил к CSS 2 несколько новых атрибутов, которые мы можем использовать в мобильных браузерах. CSS расширение начинается со значка (-), который приписывается атрибуту. Как мы позже увидим, некоторые мобильные браузеры (например Mozilla) понимают нестандартные расширения. Но, опять же, не волнуйся, мы будем смотреть на совместимость «атрибут-атрибут» и ты разберешься, как наилучшим образом управлять несовместимостями.

Access key

Первый атрибут -wap-accesskey; — это аналог XHTML атрибута accesskey. Может использоваться с любым интерактивным элементом (обычно это теги <a>, <textarea>, <label>, <input> и <button> ). Возможные значения: цифры от 0 до 9 и специальные значения * и #. Для некоторых браузеров на устройствах с числовой клавиатурой этот атрибут может использоваться при создании ярлыков для доступа к элементам. И снова, браузеры здесь ведут себя по-разному: одни никак не реагируют на использование атрибута, другие при нажатии пользователем на клавишу устанавливают фокус на нужном элементе, а третьи обеспечивают выполнение самого действия (переход по ссылке, открытие формы и т.д.).

Можно использовать только стандартные клавиши 0-9 или *, #. Присваивать функции к программируемым клавишам или любым другим специальным ключам в HTML мы не можем. Конечно, WML позволяет присваивать ссылки программируемым клавишам, но для современных браузеров наличие такого функционала не имеет никакого значения.

Можно только присвоить тот же самый ключ одному элементу на той же странице. Именно поэтому смысл в использовании атрибута -wap-accesskey есть только с селекторами или встроенными стилями и его нельзя использовать с селекторами класса или элемента.

В следующих трех примерах мы получим одинаковый результат:

<a href="http://mobilexweb.com" accesskey="0">Our website</a>
<input type="submit" value="Send" accesskey="9" />
<a href="http://mobilexweb.com" style="-wap-accesskey: 0">Our website</a>
<input type="submit" value="Send" style="-wap-accesskey: 9" />
<style type="text/css">
#linkWeb {
-wap-accesskey: 0;
}
#btnSubmit {
-wap-accesskey: 9;
}
</style>
<a href="http://mobilexweb.com" id="linkWeb">Our website</a>
<input type="submit" value="Send" id="btnSubmit" />

В таблице 5.7 проверены все варианты, чтобы определить какую версию лучше использовать и в каких браузерах мы получим необходимые результаты.

Табл. 5.7. Тестирование совместимости горячих клавиш
Браузер/платформа Поведение в ссылках Поведение в текстовых полях
Как XHTML Как inline CSS Как CSS по ID
Safari Нет реакции
Android browser Нет реакции
Symbian/S60 Нет реакции
Nokia Series 40 Нет реакции
webOS Нет реакции
BlackBerry Нет реакции
NetFront Если accesskey активирован в настройках, перейти по ссылке Если accesskey активирован, получает фокус
Openwave (Myriad) Перейти по ссылке Получает фокус
Internet Explorer Перейти по ссылке Получает фокус
Motorola Internet Browser Перейти по ссылке Получает фокус и открывается окно редактирования
Opera Mobile Нет реакции
Opera Mini Нет реакции

Как видно из таблицы 5.7 access keys работает только в некоторых браузерах, потому что многие из них используют клавиатуру для быстрого выполнения определенных действий (ярлыки (shortcuts) для браузерных функций вроде прокрутить, вернуться назад, перезагрузить). Именно поэтому мы можем использовать access keys только как вспомогательный способ доступа к функционалу веб-сайта.

Marquee

Если ты, как и я, уже давно занимаешься веб-разработкой, то, наверное, успел возненавидеть нестандартный элемент <marquee>, который многие используют на свои страницах. WAP CSS вернулся к этому методу для разработки небольших анимаций без изображений и без использования Flash. Как правило, <marquee> — это текстовый фрагмент, который непрерывно прокручивается на экране. Для некоторых мобильных браузеров в <marquee> может содержаться любой HTML, включая изображения и даже таблицы. Но не используй слишком много тяжелого кода. Подумай о производительности сайта и своих посетителях.

Чтобы сделать плавающий и прокручивающийся текст, используй любой элемент параграфа, например <p> или <div>, определи display как -wap-marquee и присвой значения некоторым атрибутам, перечисленным в таблице 5.8.

Табл. 5.8. WAP CSS свойства для marquee
Свойство Возможное значение Описание
-wap-marquee-dir ltr или rtl Направление движения. Слева направо (ltr) или справа налево (rtl).
-wap-marquee-loop число или infinite Количество циклов. При значении infinite количество циклов бесконечно.
-wap-marquee-speed slow, normal, или fast Скорость движения (не имеет точного контроля).
-wap-marquee-style scroll, slide, или alternate Возможные стили анимации.

В следующем примере показано, как при помощи <marquee> показать пользователю мини презентацию:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Mobile Web Test</title>
	<style type="text/css">
	.offer {
		display: -wap-marquee;
		-wap-marquee-dir: rtl;
		-wap-marquee-speed: medium;
		-wap-marquee-loop: infinite;
		-wap-marquee-style: scroll;
	}
	.offer strong {
		color: red;
	}
	</style>
</head>
<body>
	<div class="offer"><strong>Fly to the Moon</strong> Special offers this month	starting at US$ 145.000. Apply now and see us from the sky.</div>
	<h1>TravelWithUs.com</h1>
	(...)
</body>
</html>

Результат показан на рисунке 5.9.

Nokia N95 показывает анимацию бегущей строки согласно стандарту WAP CSS Рис. 5.9. Nokia N95 показывает анимацию бегущей строки согласно стандарту WAP CSS.

Теперь разберемся, как на этот тег реагируют браузеры. Может возникнуть соблазн активно пользоваться таким вариантом отображения, чтобы показать большой объем текста на небольшой площади. Но если браузер не поддерживает этот тег, то весь текст будет размещен на странице, перекрывая основной контент! Поэтому, для таких браузеров мы должны рассмотреть альтернативные варианты, например скрытие контента. Например:

.offer {
display: -wap-marquee;
-wap-marquee-dir: rtl;
-wap-marquee-speed: medium;
-wap-marquee-loop: infinite;
-wap-marquee-style: scroll;
}

В приведенном выше примере кода, мы сначала определили display: none чтобы скрыть блок. Затем присваиваем display: -wap-marquee. Если браузер понимает WAP CSS marquee стили, то он заменит значение none. Если же нет, то второй параметр просто игнорируется и none остается. Также мы можем применить этот стиль к элементу marquee HTML и он сможет работать во всех marquee-совместимых браузерах, перечисленных в таблице 5.9. Проблема только в том, что код не будет соответствовать стандартам (если мы к этому стремимся).

Табл. 5.9. Тестирование совместимости marquee
Браузер/Платформа Поддержка -wap-marquee Поддержка тега marquee
Safari - +
Браузер Android - +
Symbian/S60 + +
Nokia Series 40 + +
webOS - +
BlackBerry + +
NetFront + +
Openwave (Myriad) + +
Internet Explorer + -
Motorola Internet Browser + +
Opera Mobile + +
Opera Mini с ошибками -

Старайтесь избегать использования <marquee> для важной информации. Можешь применять этот тег для уменьшения занимаемого места информации, которая не имеет важного значения или требует простой анимации без использования плагинов. Избегай в <marquee> ссылок, изображений и любой другой не-текствой разметки, а для устройств, не поддерживающих <marquee> делай альтернативный CSS.

CSS расширения для форм

Еще одно отличное улучшение в WAP CSS — возможность определять полезную информацию для полей ввода. Подробнее мы поговорим об это немного позже, а сейчас посмотрим, какие расширения включены в стандарт (таблица 5.10).

Табл. 5.10. Свойства WAP CSS расширений для форм
Свойство Возможное значение Описание
-wap-input-format Complex pattern (см. главу 6) Определяет структуру текста. Может применяться для текстовых полей ввода, полей ввода паролей, и textarea.
-wap-input-required true или false Если значение true, то пользователь должен ввести контент прежде, чем покинуть поле. Может применяться для текстовых полей ввода, полей ввода паролей, и textarea. Имеет приоритет выше, чем у атрибута format для input.

Хаос

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

Куда дальше