Расширения 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 показано, в каких браузерах доступны эти расширения.
| Браузер/ Платформа | Поддержка 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, эти расширения работают примерно на половине мобильных платформ.
| Браузер/ Платформа | Блочные элементы | Строчные элементы |
|---|---|---|
| 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-.
Рис. 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).
| Свойство | Значение | Описание |
|---|---|---|
| -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 | Значения цвета | Определяет цвет, который будет использован в качестве фона, когда пользователь кликает по ссылке или кликабильному элементу. |
Куда дальше
- следующая — Глава 8. Мобильный JavaScript
- предыдущая — CSS спрайты
- содержание