HTML5 для веб-дизайнеров

Одной из проблем отображения мультимедиа в плагине является то, что содержимое плагина находится в «песочнице», отдельно от всего остального документа. Нативные мультимедиа-элементы в HTML смогут работать в комплексе с остальными браузерными технологиями – JavaScript и CSS. Элементом video можно не только управлять через JavaScript, можно также назначать ему стили (рис. 3.08).

^{Рис. 3.08. Элемент video с примененными стилями}

Попробуйте-ка сделать это с плагином.

Аудио и видео – долгожданные дополнения к HTML5, но веб – не среда вещания, а интерактивная среда. Самый старый и самый мощный способ обеспечивать интерактивность – формы. В главе 4 мы посмотрим на то, какое обновление в HTML5 получили формы.

4. Веб-формы 2.0

Когда в веб-браузерах появился JavaScript, его немедленно стали использовать для двух задач: изменения картинки при наведении мышью и улучшения форм. Когда же в CSS появился псевдокласс :hover, веб-разработчикам перестало быть нужным использовать JavaScript для того, чтобы добиться просто изменения картинки при наведении.

И эта картина зачастую повторяется. Если какое-то типовое действие достаточно популярно, практически наверняка развитие будет идти так, что вместо того чтобы писать собственный скрипт, достаточно будет более декларативного решения. Вот почему в CSS3 появляется еще больше возможностей для анимации из числа тех, что раньше требовали JavaScript.

Когда дело касается улучшения форм, у CSS есть ряд ограничений. Здесь в дело вступает HTML5. Следуя той же самой проторенной дорожкой от программного решения к декларативному, спецификация HTML5 вводит много новых улучшений форм.

Эти функции изначально были частью спецификации WHATWG, которая называлась Веб-формы 2.0 и основывалась на уже проделанной работе в W3C. Эта спецификация теперь включена в HTML5.

Placeholder

Вот типичная задача, которая часто используется для поисковых форм и обычно решается написанием скрипта для DOM:

1. Если у поля формы нет значения, вставить туда текст-заполнитель.

2. Когда пользователь перемещает фокус на это поле, убрать текст-заполнитель.

3. Если пользователь выходит из поля и в нем по-прежнему нет значения, снова поставить текст-заполнитель.

Текст-заполнитель обычно показывается шрифтом более светлого цвета, чем шрифт самого значения поля формы. Это реализуется с помощью CSS, JavaScript или обоими этими инструментами вместе.

В документе HTML5 вы можете просто использовать атрибут placeholder (рис. 4.01):

Ваши хобби

placeholder="Стряхивать филинов с деревьев">

^{Рис. 4.01. «Стряхивать филинов с деревьев» появляется в поле input посредством атрибута placeholder}

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

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

Либо же вы можете сделать запасное решение на JavaScript. В этом случае вам нужно убедиться, что скрипт на JavaScript будет исполняться только в браузерах, которые не понимают атрибут placeholder.

Вот маленькая JavaScript-функция общего характера, которая тестирует, поддерживается тот или иной атрибут или нет:

function elementSupportsAttribute(element,attribute) {

var test = document.createElement(element);

if (attribute in test) {

return true;

} else {

return false;

}

}

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

С помощью этой функции вы можете удостовериться, что JavaScript-решение будет исполняться только в тех браузерах, которые не поддерживают placeholder:

if (!elementSupportsAttribute('input','placeholder')) {

// Код запасного решения на JavaScript.

}

Autofocus

«Привет! Я автофокус. Может быть, вы помните меня по кнопочкам на сайтах: “Google: мне повезет” и “Twitter: что происходит?”»

Это простое типовое решение из одного шага, которое достаточно просто программируется на JavaScript:

1. Когда документ загрузился, автоматически поставить фокус на одно конкретное поле в форме.

HTML5 позволяет вам сделать это с помощью булева атрибута autofocus:

Что происходит?

autofocus>