Одной из проблем отображения мультимедиа в плагине является то, что содержимое плагина находится в «песочнице», отдельно от всего остального документа. Нативные мультимедиа-элементы в HTML смогут работать в комплексе с остальными браузерными технологиями – JavaScript и CSS. Элементом video можно не только управлять через JavaScript, можно также назначать ему стили (рис. 3.08).
Рис. 3.08. Элемент video с примененными стилями
Попробуйте-ка сделать это с плагином.
Аудио и видео – долгожданные дополнения к HTML5, но веб – не среда вещания, а интерактивная среда. Самый старый и самый мощный способ обеспечивать интерактивность – формы. В главе 4 мы посмотрим на то, какое обновление в HTML5 получили формы.
Когда в веб-браузерах появился JavaScript, его немедленно стали использовать для двух задач: изменения картинки при наведении мышью и улучшения форм. Когда же в CSS появился псевдокласс :hover, веб-разработчикам перестало быть нужным использовать JavaScript для того, чтобы добиться просто изменения картинки при наведении.
И эта картина зачастую повторяется. Если какое-то типовое действие достаточно популярно, практически наверняка развитие будет идти так, что вместо того чтобы писать собственный скрипт, достаточно будет более декларативного решения. Вот почему в CSS3 появляется еще больше возможностей для анимации из числа тех, что раньше требовали JavaScript.
Когда дело касается улучшения форм, у CSS есть ряд ограничений. Здесь в дело вступает HTML5. Следуя той же самой проторенной дорожкой от программного решения к декларативному, спецификация HTML5 вводит много новых улучшений форм.
Эти функции изначально были частью спецификации WHATWG, которая называлась Веб-формы 2.0 и основывалась на уже проделанной работе в W3C. Эта спецификация теперь включена в HTML5.
Вот типичная задача, которая часто используется для поисковых форм и обычно решается написанием скрипта для 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')) {
}
«Привет! Я автофокус. Может быть, вы помните меня по кнопочкам на сайтах: “Google: мне повезет” и “Twitter: что происходит?”»
Это простое типовое решение из одного шага, которое достаточно просто программируется на JavaScript:
1. Когда документ загрузился, автоматически поставить фокус на одно конкретное поле в форме.
HTML5 позволяет вам сделать это с помощью булева атрибута autofocus:
autofocus>
