Расширения WebKit

Подготовили: Анна Лысак и Татьяна Головко Дата публикации: 07.07.2011

WebKit (напомню, что это проект с открытым исходным кодом) привнес много своих расширений в CSS, а некоторые из них могут даже дополнить CSS3. В мобильном мире есть несколько разновидностей WebKit-продуктов: Safari, Android, webOS, Symbian, и т.д. Ситуация с поддержкой расширений в них может отличаться.

У многих WebKit-расширений есть дубликаты для других декстопных браузеров, например Mozilla Firefox (используется префикс -moz-) или Opera (используется префикс -o-). В CSS3 многие их этих расширений уже работают без префикса.

Ниже, в сжатом виде, приводится список наиболее популярных расширений WebKit:

  • -webkit-border-radius для скругленных углов блока. В современных мобильных браузерах также понимается как border-radius;
  • -webkit-box-shadow определяет тень для блочного элемента (CSS3 — box-shadow);
  • -webkit-columns определяет количество и ширину столбцов;
  • -webkit-border-image определяет изображение которое используется для оформления бордюр блока;
  • -webkit-text-stroke указывает, какой цвет будет использоваться для контура текста;
  • -webkit-text-fill-color указывает, какой цвет будет использоваться для заливки текста.

Некоторые из этих расширений рассмотрим более подробно.

Text Stroke и Fill

Свойства stroke и fill — это удобный способ создания необычных эффектов в заголовках (с большим шрифтом) без использования изображений. Например:

	<h1 style="-webkit-text-stroke: thin blue; -webkit-text-fill-color: yellow">
		Great Title!
	</h1>
	

В таблице 7.15 показано, в каких браузерах доступны эти расширения.

Табл. 7.15 Таблица поддержки stroke and fill
Браузер/ Платформа Поддержка stroke и fill
Safari Да
Android browser Да
Symbian/S60 Только fill с 5-й версии
Не поддерживается до 5-го выпуска
Nokia Series 40 Нет
webOS Только fill
BlackBerry Нет
NetFront Нет
Openwave (Myriad) Нет
Internet Explorer Нет
Motorola Internet Browser Нет
Opera Mobile Нет
Opera Mini Нет

Border Image

Свойство border-image — отличное решение проблемы реализации динамических размеров прямоугольника с оформленными границами. Расширение очень похоже на CSS-спрайты и весьма простое в использовании. Этот метод хорошо подходит для кнопок, заголовков, зон контента и любой области на сайте, где нам нужен нестандартный (пользовательский) дизайн границ без использования таблиц.

Для этого используем свойство -webkit-border-image, а сам синтаксис выглядит так:

	-webkit-border-image: url top right bottom left x_repeat y_repeat; 
	

url — адрес к картинке (или может быть встроенное изображение), четыре значения (top, right, bottom, left) — отступы для изображения.

Значения x_repeat и y_repeat являются дополнительными и могут быть определены, как одна из следующих констант:

  • repeat — фрагмент повторяется для заполнения области;
  • round — фрагмент повторяется для заполнения области и масштабируется таким образом, чтобы количество фрагментов было целым;
  • stretch — фрагмент растягивается для заполнения области.

border-image делится на девять частей (рисунок 7.9). Четыре из них — углы, остальные — фоновые изображения для сторон и центра.

Изображение разрезается на девять частей, и каждая из них используется как угол или как часть фона Рис. 7.9. Изображение разрезается на девять частей, и каждая из них используется как угол или как часть фона

Если применить border-image для кнопки, то никакого эффекта нажатия не будет. Для создания такого эффекта нужно псевдоклассы :active и/или :focus, указывая другой border-image. Проблемы могут возникнуть, если ты попробуешь изменить сам способ отображения кнопки, поэтому для пользовательских вариантов дизайна лучше использовать ссылки или убрать отображение кнопки по умолчанию при помощи -webkit-appearance: none.

Самый простой способ определить border-image с четырьмя равными значениями, это:

	-webkit-border-image: url distance
	
	<!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>Image Border</title>
			<style type="text/css">
				/* нам понадобится и input[type=button], а для тестовых целей, не будем применять CSS3  */
				input.bordered {
					-webkit-border-radius: 10px;
					-webkit-border-image: url(border1.png) 6;
				}
				a.bordered {
					-webkit-border-image: url(border1.png) 6;
					color: white;
					text-decoration: none;
					padding: 3px;
				}
				h1 {
					-webkit-border-image: url(border2.png) 50 50 50 50 repeat stretch;
					border: 20px;
				}
				/*  h2 будет использовать то же изображение, а отображать только половину  */
				h2 {
					-webkit-border-image: url(border2.png) 50 50 50 50 round round;
					border: 10px;
				}
			</style>
		</head>
		<body>
			<h1>This is a title</h1>
			<h2>This is a subtitle</h2>
			<input type="button" class="bordered" value="Press Me" />
			<!-- border image можно применить и к строчным элементам -->
			<a href="http://mobilexweb.com" class="bordered">This is a link</a>
		</body>
	</html>
	

Еще пример — реализация классической кнопки «Назад» в пользовательском интерфейсе iPhone. Используем только зоны left, right и center (разделяем изображения на три части). Результат этого кода на рисунке 7.10:

	<!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>Image Border</title>
			<style type="text/css">
				#back {
					-webkit-border-image: url(border1.png) 0 5 0 15;
				}
			</style>
		</head>
		<body>
			<a href="/" id="back">Home Page</a>
		</body>
	</html>
	

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

Табл. 7.16. Таблица поддержки border-image
Браузер/ Платформа Блочные элементы Строчные элементы
Safari Да Да
Android browser Да (отличается от background) Да
Symbian/S60 Частично в 5-м выпуске
Нет до 5-го выпуска
Да
Nokia Series 40 Плохо в 6-м выпуске
Нет до 6-го выпуска
Бажит в 6-м выпуске
webOS Да Да
BlackBerry Нет Нет
NetFront Нет Нет
Openwave (Myriad) Нет Нет
Internet Explorer Нет Нет
Motorola Internet Browser Нет Нет
Opera Mobile Нет Нет
Opera Mini Нет Нет

Некоторые WebKit-расширения работают в Firefox Mobile и в браузере MeeGo/Maemo, потому как в них обоих используется движок Mozilla Gecko. Для этих браузеров мы должны префикс -webkit- заменить на -moz-.

Такая кнопка может быть сделана очень легко с использованием динамического border-image. Рис. 7.10. Такая кнопка может быть сделана очень легко с использованием динамического border-image.

Расширения только для Safari

Safari на iOS добавили в CSS-стандарты (и не только в CSS, а даже в WebKit) много расширений. Эти расширения работают только в Safari для iPhone, iPad и iPod Touch (некоторые из них также работают и в дектоспных браузерах, но мы же здесь говорим только о мобильных). В зависимости от версии WebKit, Android и webOS браузеры также понимают некоторые из этих расширений.

CSS-расширения могут быть сгруппированы в следующие категории:

  • переходы;
  • анимация;
  • 2D и 3D преобразования (transform);
  • разное (перечислены в таблице 7.17).

CSS-расширения для iPhone весьма впечатляют. Они позволяют создавать Flash-подобные эффекты и 3D преобразования с использованием одного лишь CSS. Это очень удобно, хоть и трудновато иногда, потому как все должно быть написано на CSS — языке, не предназначенном изначально для такого рода разработок. Большинство этих iPhone-расширений и некоторые открытые JavaScript-библиотеки, которые могут нам существенно помочь мы рассмотрим позже (Главы 9 и 12).

Табл. 7.17. Основные CSS расширения для Safari на iOS
Свойство Значение Описание
-webkit-text-security circle, disc, none, square Определяет символ, который будет отображаться в поле пароля вместо вводимых пользователем символов.
-webkit-text-size-adjust auto, none, percentage value Определяет размер строчных букв по отношению к заглавным для удобства чтения
-webkit-appearance Частичный список: none, button, buttonbevel, checkbox, default-button, list box, listitem, mediafullscreen-button, media-mute-button, media-play-button, radio, searchfield, searchfield-cancelbutton, slider-horizontal, slider-vertical, square-button, textarea, textfield Меняют внешний вид элемента на стандартный элемент управления для этой операционной системы. Доступно в IOS 2.0. Значение none позволит нам определить пользовательский дизайн с использованием CSS.
-webkit-user-select auto / none / text С iOS 3.0 определяет, может ли пользователь выделить текст, чтобы его скопировать.
-webkit-touch-callout none, inherit Убирает всплывающее окно, которое появляется, если пользователь удерживает палец на ссылке в течение нескольких секунд.
-webkit-tap-highlightcolor Значения цвета Определяет цвет, который будет использован в качестве фона, когда пользователь кликает по ссылке или кликабильному элементу.

Куда дальше

Показать комментарии