CSS методы

В этом разделе поговорим о некоторых известных методах CSS — файлах сброса CSS, и посмотрим, как разные браузеры реагирует на их применение.

Reset CSS

В декстопной разработке очень распространено создание CSS-хака для сброса внутренних (padding) и внешних (margin) отступов по умолчанию для всех общих элементов HTML. С некоторыми оговорками мы можем использовать этот метод и в разработке для мобильных устройств: мы должны сбросить только те элементы, которые собираемся использовать; мы должны избегать использования универсального селектора (*) в целях улучшения производительности; если мы используем внешний файл reset.css, то мы должны рассмотреть вопрос о его объединении с нашим локальным CSS файлом.

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

На сайте для разработчиков Nokia предлагает три шаблона для разметки и CSS для мобильной разработки. В каждом шаблоне есть файл reset.css. Приведенный ниже код извлечен из шаблона для mid-range устройства и мы уже в зависимости от наших целей можем его адаптировать:

	html, body, div, span, object, blockquote, pre,
	abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center, dl, dt, dd, fieldset, form, label, legend,
	caption, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font-weight: normal;
		vertical-align: baseline;
		background: transparent;
	}
	p {
		border: 0;
		font-size: 100%;
		font-weight: normal;
		vertical-align: baseline;
		background: transparent;
	}
	a {
		margin: 0;
		padding: 0;
		font-weight: normal;
	}
	h1, h2, h3, h4, h5, h6 {
		margin: 0;
		padding: 0;
		border: 0;
		vertical-align: baseline;
		background: transparent;
	}
	body {
		line-height: inherit;
	}
	body table {
		margin: 0;
		padding: 0;
		font-size: 100%;
		font-weight: normal;
		vertical-align: baseline;
		background: transparent;
	}
	/* remember to highlight insertions somehow! */
	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}
	/* tables still need 'cellspacing="0"' in the markup */
	body table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	

Nokia Mobile Web Templates — набор шаблонов (включая XHTML и CSS файлы) для low-, mid- и high-end устройств. Шаблоны имеют аналогичные варианты для различных устройств в том числе хаки для решения некоторых багов (например, баг 100% ширины). Эти шаблоны оптимизированы для браузеров Series 40, Series 60, браузеров Maemo и Opera Mini. Бесплатно скачать их можно на сайте http://www.mobilexweb.com/go/nokiatemplates.

Блочная модель

Блочная модель (рисунок 7.1) — то, как браузер представляет любой блок. У каждого блочного элемента (параграф, картинка, изображение) присутствуют область контента, внутренние отступы, бордюры и внешний отступы. Сумма всех этих параметров определяет окончательные размеры блока. К счастью, большинство мобильных браузеров хорошо поддерживают данную модель.

Рис. 7.1. CSS box model является одинаковым для мобильного и классического Веба. Понимание этой модели не раз спасет нас от головной боли.

В устройствах BlackBerry (до Device Software 4.5) поддерживаются только бордюры и padding, другие свойства игнорируются.

Я не рекомендую использовать такие методы как отрицательные отступы для тех мобильных сайтов, которым необходима полная совместимость. Такие хаки могут использоваться в современных браузерах и только после тестирвоания.

В CSS 2.1 появилось свойство outline которое для каждой стороны, не занимающей место в потоке документа обеспечивает border с одинаковым размером и цветом. На low- и mid-end устройствах это свойство не поддерживается.

Форматирование текста

Отображения текста — наиболее частая задача для мобильного браузера и чтобы его оформить с максимальной совместимостью, от тебя могут потребоваться кое-какие хитрости. Полужирный (font-weight: bold) и курсив (font-style: italic) поддерживаются хорошо, но вот с поддержкой других свойств могут быть проблемы и здесь есть разные варианты.

Семейство шрифтов

При оформлении текста для мобильных браузеров именно это будет нашей первой проблемой. Для мобильных операционных систем в шрифтах нет никаких стандартов и в большинстве мобильных платформ есть только системный шрифт (как правило, без засечек).

В разметке NTT DoCoMo (разметка для японского рынка) для определения таких свойств шрифта как имя шрифта, цвет и размер используется старый тег <font> . В новых устройствах уже поддерживается CSS. В других мобильных WebKit-браузерах тег <font> также поддерживается, но применять его не рекомендуется и вместо него лучше использовать CSS.

Мы можем определить конкретные название шрифтов (например, Arial, Verdana, или Times New Roman) или универсальные типы шрифтов (font types) (например, serif, sans-serif, monospace, cursive или fantasy).

Браузер Opera Mini может работать в двух режимах: декстопном и мобильном. Начиная с 4 версии по умолчанию стоит декстопный режим, но пользователь (или поставщик услуг) может это изменить. В мобильном режиме некоторые CSS правила на твоем сайте будут игнорироваться и стили будут определены собственными стилями браузера.

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

В таблице 7.4 показан список браузеров с поддержкой шрифтов и альтернативные варианты для каждого.

Пользовательские шрифты

Если ты думал, что определение системного шрифта было головной болью, то поверь, с пользовательскими шрифтами все еще хуже. Ни один браузер не поддерживает CSS @font-face правильно (кроме Safari для iOS, где есть очень ограниченная поддержка SVG шрифтов).

Хочешь для текста использовать свой собственный шрифт — еще раз хорошенько подумай. Если это, конечно, вопрос жизни и смерти, то ты можешь рассмотреть возможность использования изображения (опять же, не рекомендуется так делать) или же другой подход для совместимых браузеров: sIFR для устройств с поддержкой Flash или Cufón для мобильных с поддержкой HTML 5. Совместимость здесь ограничена, так что даже если эти способы и будут работать, то могут быть весьма медленными.

sIFR (Scalable Inman Flash Replacement) — ненавязчивый JavaScript и Flash метод, который заменяет нормальный HTML текст на объект Flash с тем же текстом и встроенным векторным шрифтом. Загрузить его можно на http://wiki.novemberborn.net/sifr.

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

Cufón — более близкая к стандартам альтернатива sIFR: это бесплатный сервис, который позволяет нам загрузить на веб-сайт шрифт (http://cufon.shoqolate.com) и скачать скрипт, содержащий встроенный шрифт в двух форматах: VML для Internet Explorer и HTML 5 canvas для остальных браузеров.

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

В таблице 7.5 список браузеров, которые поддерживают sIFR и Cufón.

Размер шрифта

Какие элементы требуют определения размера шрифта? В большинстве случаев нам достаточно определить размер шрифта для заголовков и для селекторов секций: <h1>, <h2>, <p>, <div>.

Для определения размера шрифта мы можем использовать любые единицы измерения и практически каждый браузер их поймет. Но не каждый размер может быть отрисован браузером. Только браузеры в смартфонах с поддержкой интеллектуального масштабирования позволяют применять любой размер шрифта, если он вообще подлежит рендерингу (например, 13.5px в Safari на iOS).

Для большинства мобильных браузеров лучшим методом определения размера шрифта является использование относительных констант: xx-small, x-small, smaller, small, medium, large, larger, x-large, xx-large.

В разных операционных системах разная поддержка шрифтов. В некоторых есть только три возможных размера текста и если мы используем типичные пиксельные определения, то два разных размера (например, 12 и 14 пикселей) могут быть представлены идентично. Если мы используем относительные константы (например, large) то у текста с большим шрифтом больше и вероятность быть представленным. Другой способ (совместимость присутствует) определить размеры шрифта используя значения em. Это отлично подходит для поддержки разных размеров экрана и DPI, потому что это значение относительно и способно масштабироваться до размера стандартного шрифта конкретного устройства.

Размер шрифта по умолчанию (средний) как правило идеально подходит для нормального текста параграфа именно в этой операционной системе и для обычного текста мы должны использовать именно его.

Выравнивание текста

Выровнять текст мы можем при помощи text-align внутри блочного элемента (как <p> или <h1>) со значением right, left, center или justify. Как показано в таблице 7.6 значение justify хуже всего поддерживается в мобильных устроствах и если такой поддержки нет, то текст будет представлен со значением left.

Другие стандартные стили текста

Такие стили как text-decoration, text-transformn, font-variant, letter-spacing и word-spacing нужно использовать с осторожностью. Лучше думай, что они все равно не будут работать и стандартную функциональность нужно сделать без них. Да, есть некоторые браузеры, которые могут их обработать и это, конечно, отлично, но все равно не стоит рассчитывать на возможность применения этих стилей.

Позже мы рассмотрим еще некоторые CSS3 и WebKit расширения для стилизации текста.

Все о поддержке CSS в мобильных устройствах можно найти на сайте http://www.quirksmode.org/m/css.html. На этом сайте есть множество тестов и результатов для CSS селекторов и свойств ряда мобильных устройств.

Тень для текста

Еще одно не мобильное свойство CSS 2.1 — text-shadow. Эта функция позволяет определять цвет, смещение по оси-x, смещение по оси-y и радиус размытости тени, которая будет применена к элементу с текстом. Например, для заголовка с тенью с рисунка 7.2 нужно использовать такой код:

		h1 {
			text-shadow: 0.1em 0.1em #AAA
		}
	

Рис. 7.2. Тень для текста следует использовать с осторожностью и только для заголовков или коротких текстов

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

Text overflow

CSS3 добавляет в мобильный веб-дизайн очень полезную функцию: text-overflow. Это свойство доступно в некоторых мобильных браузерах и позволяет нам определить, что в конце какого-то текстового фрагмента должено появится многоточие, если текст превышает объемы отведенного для него контейнера. Эта функция дает отличную возможность сократить количество места, которое необходимо для ссылок, а также для предварительного просмотра (превью) или резюме, которые показывают все детали на странице уже после того, как пользователь по ним кликнет.

Например, мы можем показать заголовок и описание при помощи text-overflow установленного в ellipsis. Когда пользователь щелкает по заголовку, мы при помощи JavaScript удаляем свойство text-overflow и текст отображается полностью. Так мы увеличиваем количество контента, который можно разместить на странице. Функция text-overflow одинаково хорошо работает на устройствах, которые поддерживают портретный и альбомный режимы отображения: с text-overflow мы можем обеспечить в обоих режимах использование не более одной линии.

Для использования этой функции для параграфов (или для любого другого элемента, содержащего текст) должен быть применен overflow: hidden; чтобы избежать переполнения текста в следующей строке; white-space:nowrap используется с целью не допустить перенос слов на новую строку.

В мобильных браузерах у text-overflow могут быть значения clip и ellipsis. Значение ellipsis обеспечивает появление многоточия после последнего символа, который помещается в поле (pисунки 7.3 и 7.4). clip — это значение по умолчанию, которое обрезает без добавления многоточия.

Рис. 7.3. text-overflow: ellipsis это отличная возможность обрезать контент на мобильных сайтах

Рис. 7.4. Gmail для смартфонов является отличным примером использования text-overflow. Показан внешний вид в портретном и ландшафтном режимах. Обрати внимание, что количество текста больше в альбомной ориентации

Вот пример кода, который генерирует результат, показанный на рисунке 7.3:

	<!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>Documento sin título</title>
			<style type="text/css">
				ul p {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			</style>
		</head>
		<body>
			<h1>Latest news</h1>
			<ul id="news">
				<li>
					<a href="#">Teletransporter discovered</a>
					<p>Beam me up, Scotty! Finally scientists from London have discovered
					teletransportation</p>
				</li>
				<li>
					<a href="#">Teletransporter discovered</a>
					<p>Beam me up, Scotty! Finally scientists from London have discovered
					teletransportation</p>
				</li>
			</ul>
		</body>
	</html>
	

В таблице 7.8 приведен перечень браузеров, в которых поддерживается свойство text-overflow.

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

Корректировка текста в iPhone

В Safari на iOS специально для управления размером текста, подготовленного для масштабирования, поддерживается CSS стиль -webkit-text-size-adjust. У этого стиля могут быть значения auto (по умолчанию), none и проценты (например, 200%). По умолчанию iOS перезаписывает размер шрифта сайта, чтобы текст можно легко прочитать, если пользователь захочет применить масштабирование отдельного параграфа. Вот при помощи это стиля мы можем предопределить такой сценарий поведения, выключив его (none) и определив процент масштаба, который должен быть применен к шрифту (который определен шрифтом по умолчанию) на декстопном веб-сайте.

Если мы хотим «подогнать» декстопный веб-сайт для лучшего отображения в iPhone, то мы должны оставить этот стиль со значением auto. Но, если же делается только мобильная версия сайта, то мы, скорее всего, захотим сами определить размеры шрифтов и потому эту функцию нужно отключить:

		body {
			-webkit-text-size-adjust: none
		}
	

Как можно увидеть на Рисунке 7-5, даже если фрагмент текста изначально адаптирован под большую область просмотра, при помощи атрибута -webkit-text-size-adjust мы можем это изменить и сделать для пользователя более удобным процесс чтения на iPhone.

Рис. 7.5. Это один и тот же и текстовый абзац с -webkit-text-size-adjust: none и с -webkit-text-size-adjust: 400%. Эта функция полезна только в не-мобильном веб-дизайне.

По теме

• Online сборка reset.css
• Обнуление отступов
• Сброс стилей с помощью CSS
• Нестандартный шрифт. Быть ему или нет?
• Безопасные шрифты
• @font-face. Нестандартный шрифт средствами CSS
• Box model — блочная модель

Куда дальше

• следующая — Общие шаблоны
• предыдущая — Селекторы
• содержание