Автофокусировка в формах

Протестировать поддержкуподсказывающего текста можно способом 2 (см. раздел «Способы тестирования браузера» этой главы). Если ваш браузер поддерживает его, то для DOM-объекта, представляющего тег <input>, будет определено свойство placeholder (даже когда в HTML-коде ему не присвоено никакое значение). Если нет, то свойство не будет определено. Проверить поможет такая функция:

function supports_input_placeholder() { var i = document.createElement('input'); return ‘placeholder’ in i;

}

Чтобынеписатьсобственнуюфункцию,прибегнитек помощиModernizr(см.раздел «Modernizr: библиотека для тестирования HTML5-функций» данной главы):

if (Modernizr.input.placeholder) {

//подсказывающий текст будет виден!

}else {

//подсказывающий текст не поддерживается,

//вернемся к нашим сценариям

}

Автофокусировка в формах

На многих сайтах с помощью JavaScript реализована автоматическая фокусировка первого из полей веб-формы. Так, на главной странице Google..com форма поиска несет фокус, так что запрос можно вводить сразу, не помещая курсор в поле. Это удобно для большинства посетителей, но может мешать «продвинутым» пользователям и людям с особыми потребностями. Если на такой странице нажать Пробел, то прокрутка на один экран вниз не сработает, как можно ожидать; вместо этого в поле ввода появится пробел. Другой пример: если переместить фокус в другое из полей формы, пока страница еще грузится, «услужливая» система вернет курсор обратно, в начальное поле. Это сбивает с ритма, к тому же пользовательский ввод попадает не туда, куда следует.

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

ДлярешенияпроблемывHTML5введенатрибутautofocus,которыйможетбыть применен к любому элементу веб-формы. Этот атрибут работает в полном соответствиисназванием,тоестьперемещаеткурсорводноизполейвводанаформе.Ноэто не сценарное решение, а HTML-код, значит, его поведение на всех сайтах будет одинаково. Со своей стороны, разработчики браузеров и браузерных расширений, возможно, предложат пользователям функцию отключения автофокусировки.

Протестироватьподдержкуавтофокусировкиможноспособом2(см.раздел«Способы тестирования браузера» этой главы). Если ваш браузер поддерживает автофокусировку, то для DOM-объекта, представляющего тег <input>, будет определено свойство autofocus (даже когда в HTML-коде оно не активизируется). Если нет, то свойство не будет определено. Проверить поможет такая функция:

function supports_input_autofocus() {

var i = document.createElement('input'); return ‘autofocus’ in i;

}

Чтобы не писать собственную функцию, прибегните к помощи Modernizr (см. раздел «Modernizr: библиотека для тестирования HTML5-функций» этой главы):

if (Modernizr.input.autofocus) {

//автофокусировка работает!

}else {

//автофокусировка не работает,

//вернемся к нашим сценариям

Микроданные

Микроданные (http://bit..ly/ckt9Rj) — это стандартизованный способ расширения се- мантикивашихвеб-страниц.Так,например,спомощьюмикроданныхможноуказать, что та или иная фотография доступна на условиях определенной лицензии Creative Commons. Как вы увидите в главе 10, при верстке страницы с личной информацией тоже можно с успехом пользоваться микроданными. Браузеры, браузерные расши- ренияипоисковыесистемыумеютпреобразовыватьHTML5-микроданныевформат vCard — стандарт обмена контактной информацией. Кроме всего названного, можно определять пользовательские словари микроданных.

Стандарт микроданных HTML5 включает в себя элементы разметки HTML (главным образом для поисковиков) и набор DOM-функций (главным образом для браузеров). Вашим веб-страницам не повредит разметка микроданных, ведь в каждом отдельном документе она состоит не более чем из нескольких уместно вписанных атрибутов. Поисковые системы, которые не умеют работать с микроданными, будут эти атрибуты просто игнорировать. Если же вы хотите оперировать микроданными посредством DOM, то нужно проверить, работает ли в браузере DOM API микроданных.

ПротестироватьподдержкуAPIHTML5-микроданныхможноспособом1(см.раз- дел «Способы тестирования браузера» этой главы). Если ваш браузер поддерживает этот API, то для глобального объекта window будет определена функция getItems(). Соответственно, если поддержки микроданных в браузере нет, то функция тоже не будет определена. Проверить можно так:

function supports_microdata_api() { return !!document.getItems;

}

Вероятно, пока вы читали эту главу, вам успели надоесть однообразные ссылки на Modernizr. Тогда вы будете рады узнать, что Modernizr пока не умеет тестировать поддержку API микроданных, и в этом случае вам придется-таки написать проверку самостоятельно.

Для дальнейшего изучения

Спецификации и стандарты:

тег <canvas> (http://bit..ly/9JHzOf);тег <video> (http://bit..ly/a3kpiq);

типы полей ввода (http://bit..ly/akweH4);

атрибут <input placeholder> (http://bit..ly/caGl8N);атрибут <input autofocus> (http://bit..ly/db1Fj4);

локальное хранилище HTML5 (http://dev..w3..org/html5/webstorage/);фоновые вычисления (http://bit..ly/9jheof);

офлайновые веб-приложения (http://bit..ly/d8ZgzX);

API геолокации (http://www..w3..org/TR/geolocation-API/). JavaScript-библиотеки:

Modernizr (http://www..modernizr..com/) — библиотека для тестирования HTML5-

функций;

geo.js (http://code..google..com/p/geo-location-javascript/) — обертка для API геоло-

кации.

Другие статьи и материалы:

Video for Everybody! (http://camendesign..com/code/video_for_everybody);

«Элементарное введение в кодировки видеоданных» (http://diveintomark..org/ tag/give);

«Свойства разных типов видео» (http://wiki..whatwg..org/wiki/Video_type_parameters);

приложение к этой книге.

3 Что все это значит?

Приступим

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

Предметом наших опытов станет страница http://diveintohtml5..org/examples/blogoriginal..html. Вам суждено не просто изучить ее, а и буквально «сжиться» с ней, пожалуй, даже полюбить ее. Это все еще впереди. А пока заглянем в исходный код страницы.

Определение типа документа

Итак, начнем с самого начала:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

В этих строках задано так называемое определение типа документа (ОТД). История возникновения ОТД долгая и довольно мрачная. При разработке браузера Internet Explorer 5 под операционную систему компьютеров Macintosh компания Microsoft столкнулась с неожиданной проблемой. В новой версии браузера было столько улучшений по части стандартов, что старые страницы отображались в нем неправильно. Вернее, отображались они правильно (в соответствии со спе­ цификацией), но пользователь думал, что неправильно. Эти страницы были сверстаны с оглядкой на странности работы популярных браузеров того времени

(2000), главным образом Netscape 4 и Internet Explorer 4. Интернет оказался не готов к той степени совершенства, которую демонстрировал IE5/Mac.

Тогда специалисты Microsoft предложили нетривиальный выход. Перед прорисовкой страницы IE5/Mac пытался найти в ее исходном тексте «тип документа», который, как правило, указывают в самых первых строках, выше открывающего тега <html>. Старые страницы, отображение которых надо было согласовать с причудами старых браузеров, обычно вообще не содержали ОТД. Эти страницы брау-