ХТМЛ – это язык разметки веб-страниц, по сути он отвечает за правильное отображение всех элементов на странице. Постепенно выпускаются новые спецификации языка, последней является пятая версия, которая принесла упразднение старых и внедрение новых тегов и функций. C HTML5 Yandex браузер стал поддерживать проигрывание видео через собственный Video Player, который не требует установку других плагинов, вроде Adobe Flash Player. Встроенный функционал языка позволяет воспроизвести любой фильм на сайте, поддерживающий HTML5.

При отсутствии HTML5 для браузера Яндекс для воспроизведения видео и части музыки приходилось пользоваться Flash Player. Получалась ситуация, при которой стандартными средствами браузера невозможно было прослушать музыку. Наибольший приток пользователей к Flash был спровоцирован появлением крупнейшего видеохостинга YouTube. Со временем другие крупные компании, например, Apple, стали использовать его для обработки видео.

Прирост пользователей продолжался долгое время, сразу после выхода HTML 4.01 наблюдался большой скачок популярности. Отток произошёл лишь после выпуска новой спецификации HTML5, которая впервые появилась в 2012 году, но полноценный запуск произошёл в 2014 году.

К переходу на HTML5 видео проигрыватель подталкивает несколько основных недостатков плагина от Adobe:

• Необходимость дополнительно устанавливать в систему. Со временем его добавили в Google Chrome по умолчанию;
• Низкая скорость работы и частые перебои в загрузке;
• Плохая стабильность работы, нередко появлялись сбои, конфликты, часто приходилось перезагружать страницу.

Преимущества HTML5 в сравнении с Adobe Flash Player

Технологии по своей сути отличаются, но предназначаются для одних и тех же задач. Для пользователей и разработчиков новый стандарт ХТМЛ5 принёс массу преимуществ:

• Открытый код. Программист самостоятельно может доработать код. Полезно для повышения безопасности бизнес-ресурсов и приложений;
• Быстрое развитие. Разработкой занимается продвинутая компания W3C, которая черпает хорошие идеи у пользователей, дорабатывающих стандарт;
• Совместимость с большинством платформ. Flash Player не поддерживается на Android до 2.01 и 4.1х и более новые варианты, также плагин несовместим с iPhone и iPod. Для работы нового проигрывателя требуется иметь относительно новую версию Yandex browser;
• Энергоэффективная технология. Видео плеер HTML5 потребляет значительно меньше ресурсов процессора, соответственно, экономит заряд, что важно для любого мобильного телефона.

Что такое HTML5 Video Player для браузера Яндекс?

HTML5 Video Player является программой, предназначенной для конвертирования видеофайлов в формате HTML5. Дополнительно через приложение можно смотреть видео, но такой необходимости не возникает с современными возможностями Яндекс обозревателя. В программу можно загрузить любой файл распространённых видео форматов: mp4, AVI, MKV.

После обработки файла он будет пригоден для загрузки на сервер, функция публикации уже встроена в программу. До заливки на сервер видео можно просмотреть в браузере. Загрузить программу лучше с официального сайта .

Некоторые пользователи жалуются, что приложение не работает, закрываясь сразу после загрузки в неё файла. Устранить проблему помогает переустановка или отключение антивируса. Чтобы не заниматься поиском причин неисправности, лучше воспользоваться аналогичной программой — Free HTML5 Video Player.

Процесс использования обеих приложений аналогичен:

Чтобы вставить ролик на сайт, достаточно скопировать JavaScript код со страницы в браузере, которая открылась после конвертации, и вставить в блок для видео на веб-ресурсе.

Как посмотреть HTML5 Video в Яндекс браузере

На самом деле никаких особых методик для просмотра видео в интернет формате HTML5 не потребуется. Чтобы начать просмотр, достаточно перейти на видео и браузер всё сделает самостоятельно. Воспроизвести видео на YouTube и многих других сервисах не составляет труда, сегодня этот видеохостинг работает исключительно с форматом ХТМЛ5, только для устаревших обозревателей происходит автоматическое переключение на старый Flash Player.

Иногда не получается просмотреть видео в формате HTML5 при наличии ошибок. Технология относится к относительно стабильным способам просмотра визуального контента и звука, но периодические провоцирует ошибки:

Иногда помогает обновление Яндекс обозревателя:

Для рядового пользователя просмотреть видео в HTML не составляет сложности, но важно наличие поддержки формата со стороны сервиса. Известная социальная сеть Facebook не работает с HTML5, но есть способ открыть эту возможность посредством расширения HTML5 Video Player, его можно скачать по ссылке .

ХТМЛ 5 – это общедоступный формат, который поддерживается всеми современными браузерами, его не нужно отдельно устанавливать. С помощью программы HTML5 Video Player для Яндекс браузера можно посмотреть, загрузить видео и преобразовать различные форматы в ХТМЛ5, сделав их доступными для онлайн просмотра.

Марк Пилгрим

Перевод: Влад Мержевич

Когда ваш браузер отображает веб-страницу, он конструирует объектную модель документа (Document Object Model, DOM ) - набор объектов, представленных HTML-элементами на странице. Каждый элемент - каждый

Каждый и каждый - показан в DOM самостоятельным объектом (есть также глобальные объекты, вроде window или element , но они слишком специфичны).

Ко всем DOM-объектам можно применить основные свойства, но некоторые объекты имеют больше свойств, чем другие. В браузерах, поддерживающих возможности HTML5, отдельные объекты обладают уникальными свойствами. Заглядывание в DOM подскажет вам, какие возможности поддерживаются.

Вот четыре основных техники для исследования поддерживаемых браузером технологий. Начиная с более простой и заканчивая комплексной техникой.

1. Проверка что определенные свойства доступны для глобальных объектов (таких как window или navigator ).

2. Создаем элемент, затем проверяем, что свойства для этого элемента существуют.

3. Создаем элемент, затем проверяем, что некоторые методы доступны для этого элемента, затем вызываем этот метод и смотрим возвращаемое значение.

4. Создаем элемент, устанавливаем для определенных его свойств значения, затем проверяем, возвращаются ли эти значения.

Библиотека Modernizr

Открытое программное обеспечение Modernizr это JavaScript-библиотека, распространяемая по лицензии MIT , для проверки поддержки большинства возможностей HTML5 и CSS3. На момент написания книги последняя версия 1.6, убедитесь, что у вас свежая версия. Для использования включите следующую строку в ваш документ.

Погружение в HTML5



...

Modernizr запускается автоматически, так что не надо использовать никакой функции modernizr_init() для вызова библиотеки. При запуске создается глобальный объект Modernizr , который содержит булево значение для каждой технологии. К примеру, если браузер поддерживает тег , то Modernizr.canvas вернет true . Если браузер не поддерживает эту возможность, то Modernizr.canvas вернет false .

if (Modernizr.canvas) {

} else {

}

Рисование

HTML5 определяет тег как «холст для растровой графики, который может использоваться для отображения диаграмм, компьютерных игр или вывода других изображений на лету». Сам холст представляет собой прямоугольник на странице, в котором с помощью JavaScript рисуется, что вы пожелаете. HTML5 определяет набор функций называемых «Canvas API» для рисования фигур, контуров, создания градиентов и трансформации.

Для проверки Canvas API используется . Если ваш браузер поддерживает рисование, в DOM будет элемент , к которому применим метод getContext() . Если браузер не поддерживает рисование, для

function supports_canvas() {
return !!document.createElement("canvas").getContext;
}

Эта функция создает фиктивный элемент . Такой элемент не применяется к документу, его даже нельзя увидеть. Он только покоится в памяти, нигде и ничего не делает, подобно лодке в безмятежной реке.

return !!document.createElement("canvas") .getContext;

Когда вы создаете фиктивный , его можно проверить на наличие метода getContext() . Этот метод будет существовать, если браузер поддерживает рисование.

return !!document.createElement("canvas").getContext ;

Наконец, приводим результат к булевому типу (true или false ) с помощью приема двойного отрицания.

return !! document.createElement("canvas").getContext;

Эта функция определяет поддержку основных элементов Canvas API, включая фигуры, контуры, градиенты и текстуры. Она не определяет стороннюю библиотеку explorercanvas, которая используется в Internet Explorer.

Вместо написания своей функции вы можете использовать Modernizr для определения поддержки Canvas API.

if (Modernizr.canvas ) {
// Можно что-нибудь рисовать!
} else {
// Увы, нет встроенной поддержки рисования
}

Рисование текста

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

Проверка на рисование текста основана на . Если ваш браузер поддерживает рисование, то для созданного элемента будет доступен метод getContext() .Если браузер не поддерживает рисование, для будут работать только основные свойства, но никак не специфичные.

function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement("canvas");
var context = dummy_canvas.getContext("2d");
return typeof context.fillText == "function";
}

Данный пример начинается с проверки на возможность рисования, используя функцию supports_canvas() , вы ее видели в предыдущем разделе. Если браузер не поддерживает Canvas API, значит, нет и рисования текста!

if (!supports_canvas() ) { return false; }

Далее, вы создаете фиктивный элемент и получаете его контекст. Это гарантированно работает, поскольку функция supports_canvas() уже проверила, что метод getContext() существует для всех объектов .

var dummy_canvas = document.createElement("canvas");
var context = dummy_canvas.getContext("2d") ;

Наконец, вы проверяете, есть ли в контексте рисования функция fillText() . Если да, значит рисование текста доступно. Ура!

return typeof context.fillText == "function" ;

Вместо написания своей функции вы можете использовать Modernizr для определения поддержки рисования текста.

if (Modernizr.canvas ) {
// Можно что-нибудь рисовать!
} else {
// Увы, нет встроенной поддержки рисования
}

Видео

HTML5 определяет новый элемент, названный , для вставки видео на вашу страницу без использования сторонних плагинов вроде Apple QuickTime® или Adobe Flash®.

Тег настроен для использования без всяких определяемых скриптов. Вы можете указать несколько видеофайлов и браузеры, которые поддерживает HTML5-видео, выберут тот формат, с которым они работают.

Браузеры, которые не поддерживают HTML5-видео, полностью игнорируют тег , но это можно использовать в своих интересах и указать браузеру проигрывать видео через сторонний плагин. Крок Кэмен назвал такое решение Видео для каждого! , в нем используется HTML5-видео, если оно доступно и обращение к QuickTime или Flash для старых браузеров. Это решение не использует JavaScript и работает фактически во всех браузерах включая мобильные.

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

function supports_video() {
return !!document.createElement("video").canPlayType;
}

Вместо написания своей функции вы можете использовать Modernizr для определения поддержки видео.

if (Modernizr.video ) {
// Смотрим кино!
} else {
// Нет встроенной поддержки видео
}

Форматы видео

Форматы напоминают языки, на которых говорят и пишут люди. В России некоторые газеты могут выходить на английском языке, но если вы читаете только по-русски, вряд ли они будут для вас полезны. Для проигрывания видео браузер должен понимать тот «язык», на котором написано видео.

«Язык» видео называется кодеком - это алгоритм, который используется для кодирования видео в поток битов. По всему миру распространено больше дюжины всяких кодеков. Какой же из них выбрать? К сожалению, браузеры не могут договориться о едином кодеке для проигрывания видео. Тем не менее, их количество сократилось до двух. Один из них требует денежных отчислений (потому что основан на патенте), но работает в Safari и iPhone. Другой кодек свободный и работает в таких браузерах как Chrome и Firefox.

Для проверки на поддержку форматов видео используется . Если браузер поддерживает HTML5-видео, в DOM будет создан объект, ассоциированный с , у которого есть метод canPlayType() . Этот метод говорит о том, что браузер поддерживает некоторые форматы.

Эта функция проверяет, что формат H.264 поддерживается.

function supports_h264_baseline_video() {


return v.canPlayType("video/mp4; codecs="avc1.42E01E, mp4a.40.2"");
}

Функция начинается с проверки на поддержку HTML5-видео с помощью функции supports_video() , о ней шла речь в предыдущем разделе. Если браузер не поддерживает видео, значит, не поддерживает и форматы!

if (!supports_video() ) { return false; }

Затем создается фиктивный элемент , который не будет виден и вызывается метод canPlayType() . Этот метод гарантированно будет доступен, поскольку функция supports_video() это обеспечивает.

var v = document.createElement("video");

Видео формат в действительности это комбинация разных вещей. В технической терминологии вы спрашиваете браузер, может ли он проиграть видео H.264 со звуком AAC в контейнере MPEG-4.

Функция canPlayType() не возвращает значение true или false , при распознавании формата функция возвращает следующую строку:

"probably" - браузер уверен, что сможет воспроизвести этот формат;
"maybe" - браузер думает, что, скорее всего, сможет воспроизвести;
"" (пустая строка) - браузер не знает такого формата.

Вторая функция проверяет открытие формата видео через Firefox и других браузеров с открытым кодом.

function supports_ogg_theora_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType("video/ogg; codecs="theora, vorbis"" );
}

И наконец, WebM, новый открытый (и свободный от отчислений) видео-кодек, который включен в новые версии основных браузеров, таких как Chrome, Firefox и Opera. Вы можете использовать аналогичную технику для определения поддержки видео WebM.

function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType("video/webm; codecs="vp8, vorbis"" );
}

Вместо написания своей функции вы можете включить Modernizr (версии 1.5 и старше) для определения поддержки разных форматов видео.

if (Modernizr.video) {
// Да, можно смотреть видео! Но какое?
if (Modernizr.video.webm ) {
// Попробуем WebM
} else if (Modernizr.video.ogg ) {
// Попробуем Ogg Theora + Vorbis в контейнере Ogg
} else if (Modernizr.video.h264 ){
// Попробуем H.264 + AAC в контейнере MP4
}
}

Локальное хранилище

Хранилище HTML5 позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже. Идея напоминает кукисы, но хранилище предназначено для сохранения гораздо большего объема информации. Кукисы ограничены в размерах, и ваш браузер каждый раз посылает веб-серверу запрос новой страницы (если на это есть время и позволяет полоса пропускания). Хранилище HTML5 остается на вашем компьютере, и сайты могут обращаться к нему через JavaScript после загрузки веб-страницы.

Спроси профессора Маркапа

☞ В. Локальное хранилище действительно является частью HTML5? Почему же оно выделено в отдельную спецификацию?

О. Краткий ответ да, локальное хранилище это часть HTML5. Развернутый ответ такой - локальное хранилище входит в спецификацию, но отделено от нее, потому что некоторые люди из Рабочей группы HTML5 пожаловались, что HTML5 стал слишком большим. Если это звучит, как разрезание пирога на большее количество кусочков для уменьшения общего числа калорий, что ж, добро пожаловать в дурацкий мир стандартов.

Для проверки поддержки хранилища HTML5 используется . Если браузер поддерживает эту технологию, то будет доступно свойство localStorage для объекта window . Если же браузер не поддерживает хранилище, то свойство localStorage вернет значение undefined . В старых версиях Firefox была ошибка, при которой возникало исключение, если кукисы были отключены. Так что вся проверка проходит с использованием конструкции try ...catch .

function supports_local_storage() {
try {
return "localStorage" in window && window["localStorage"] !== null;
} catch(e){
return false;
}
}

Вместо написания своей функции вы можете использовать Modernizr для определения поддержки локального хранилища.

if (Modernizr.localstorage ) {
// Хранилище доступно!
} else {
// Увы, нет поддержки локального хранилища
}

JavaScript чувствителен к регистру, атрибут Modernizr должен писаться как localstorage (в нижнем регистре), при этом свойство DOM вызывается как window.localStorage (смешанный регистр).

Спроси профессора Маркапа

☞ В. Как насчет безопасности моего хранилища HTML5? Кто-нибудь может его прочитать?

О. Только те, кто имеет непосредственный доступ к вашему компьютеру, могут просмотреть (или изменить) ваши данные в хранилище. Через браузер любой сайт может прочитать и модифицировать собственные значения, но другие сайты не смогут получить к ним доступ.

Фоновые вычисления

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

Для проверки поддержки фоновых вычислений используется . Если ваш браузер поддерживает эту технологию, глобальному объекту window будет доступно свойство Worker . В противном случае свойство Worker будет недоступно.

function supports_web_workers() {
return !!window.Worker;
}

Вместо написания своей функции вы можете использовать Modernizr для определения поддержки фоновых вычислений.

if (Modernizr.webworkers ) {
// window.Worker доступно!
} else {
// Нет встроенной поддержки фоновых вычислений
}

JavaScript чувствителен к регистру, атрибут Modernizr должен писаться как webworkers (в нижнем регистре), при этом свойство DOM вызывается как window.Worker (с заглавной буквой W).

Оффлайновые приложения

Читать статичные веб-страницы оффлайн довольно просто: подключаетесь к Интернету, загружаете веб-страницу, отключаетесь от Интернета, уезжаете в уединенное место и читаете страницы на досуге. Для сбережения времени можно пропустить шаг насчет уединенного места. Но как насчет веб-приложений подобных Gmail или Google Docs? Спасибо HTML5, теперь любой (а не только Google) может создать приложение, которое будет работать оффлайн.

Оффлайновое приложение начинается как онлайновое. Когда вы первый раз посещаете сайт, поддерживающий оффлайновую работу, веб-сервер сообщает браузеру, какие файлы и в каком порядке нужны для работы. Это могут быть любые файлы - HTML, JavaScript, изображения, даже видео. Как только браузер скачает все необходимые файлы, вы можете посещать сайт даже без подключения к Интернету. Ваш браузер будет уведомлен, что вы отключены от сети, и надо использовать скачанные ранее файлы. Когда вы в следующий раз войдете в сеть, любые сделанные вами изменения могут быть отосланы на веб-сервер.

Проверить поддержку оффлайновых приложений можно с использованием . Если ваш браузер поддерживает эту технологию, будет доступно свойство applicationCache для глобального объекта window . Если браузер не поддерживает оффлайновые приложения, свойство applicationCache будет не определено.

function supports_offline() {
return !!window.applicationCache;
}

Вместо написания своей функции вы можете использовать Modernizr для определения поддержки оффлайновых приложений.

if (Modernizr.applicationcache) {
// window.applicationCache доступно!
} else {
// Увы, без сети ничего не работает
}

Учтите, что JavaScript чувствителен к регистру. Атрибут Modernizr должен писаться как applicationcache (в нижнем регистре), при этом свойство DOM вызывается как window.applicationCache (смешанный регистр).

Геолокация

Геолокация это способ выяснить, где вы находитесь в мире, по усмотрению можно делиться этой информацией с доверенными людьми. Существует несколько способов определить ваше положение - по IP-адресу, подключению к беспроводной сети, сотовому телефону или через GPS оборудование которое вычисляет координаты (широту и долготу) через спутники в небе.

Спроси профессора Маркапа

☞ В. Геолокация это часть HTML5? Почему мы говорим о ней?

О. Поддержка геолокации включена в браузеры для будущей работы с новыми возможностями HTML5. Строго говоря, геолокация была стандартизирована Рабочей группой по геолокации, которая отделена из Рабочей группы HTML5. Но я все равно в этой книге говорю о ней, потому что эта часть развития Веба происходит в данный момент.

Для проверки поддержки геолокации используется . Если браузер поддерживает геолокацию, будет доступно свойство geolocation для глобального объекта navigator . В противном случае свойство geolocation будет недоступно. Вот как проверить поддержку геолокации.

function supports_geolocation() {
return !!navigator.geolocation;
}

Вместо написания своей функции, можно использовать Modernizr.

if (Modernizr.geolocation ) {
// Можно смотреть, где вы находитесь!
} else {
// Нет встроенной поддержки геолокации.
}

Если браузер не поддерживает исходно геолокацию, не стоит терять надежду. Плагин с открытым исходным кодом Gear от Google работает в Windows, Mac, Linux, Windows Mobile и Android. Он расширяет возможности старых браузеров, которые не поддерживают новомодные вещи, описанные в этом разделе. В частности, Gear поддерживает геолокацию. Это не то же самое, что navigator.geolocation , но выполняет те же задачи.

Поля ввода

Вы знаете все о формах, не так ли? Пишем , вставляем несколько , может быть и заканчиваем все кнопкой .

Вы знаете только половину. HTML5 определяет свыше дюжины новых полей, которые вы можете использовать в своих формах.

для поиска

для ввода чисел

ползунок

для выбора цвета

для телефонного номера

для веб-адресов

для почтовых адресов

для выбора календарной даты

для месяца

для недели

для времени

для указания даты и времени

для местной даты и времени

Проверка на поддержку полей ввода происходит с помощью . Вначале вы должны создать фиктивный элемент в памяти. По умолчанию значением атрибута type для тега выступает text . В дальнейшем это окажется важно.

var i = document.createElement("input");

i.setAttribute("type", "color");

Если браузер поддерживает указанное поле ввода, тогда свойство type вернет установленное значение. В противном случае браузер проигнорирует это значение и вернет text .

return i.type !== "text";

Вместо написания тринадцати отдельных функций для проверки, вы можете использовать Modernizr для определения поддержки новых полей. Библиотека Modernizr повторно использует один для эффективного определения всех 13 типов. Затем строится хэш, с именем Modernizr.inputtypes содержащий 13 ключей со значениями атрибута type и 13 булевых значений (true , если поддерживается и false , если нет).

if (!Modernizr.inputtypes.date ) {
// Нет встроенной поддержки для
}

Подсказывающий текст

Кроме новых типов, HTML5 включает несколько небольших правок для имеющихся форм. Одно из таких усовершенствований это подсказывающий текст для тега . Такой текст показывается внутри поля, пока оно не будет очищено или не получит фокус. Когда вы щелкаете в поле, подсказывающий текст исчезает.

Для проверки подсказывающего текста применяется . Если ваш браузер поддерживает эту возможность, в DOM будет создан объект соответствующий , у которого имеется свойство placeholder . В противном случае, это свойство для будет недоступно.

function supports_input_placeholder() {

return "placeholder" in i;
}

Вместо написания собственной функции, вы можете использовать Modernizr для проверки.

if (Modernizr.input.placeholder ) {
// Подсказывающий текст будет виден!
} else {
// Нет поддержки подсказывающего текста,
// надо использовать скрипты
}

Автофокус форм

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

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

Решением этих проблем является атрибут autofocus , который применяется ко всем элементам форм. Атрибут autofocus делает именно то, о чем и говорит его название: перемещает фокус к определенному полю. Поскольку для его работы используется разметка HTML, а не скрипт, то поведение будет одинаковым для всех сайтов. К тому же разработчики браузеров (или авторы расширений) могут предложить пользователям возможность отключать автофокус.

Проверка на поддержку автофокуса основана на . Если автофокусировку в формах, в DOM будет создан объект для представления , у которого есть свойство autofocus . В противном случае это свойство не будет доступно. Вы можете проверить автофокус с помощью следующей функции.

function supports_input_autofocus() {
var i = document.createElement("input");
return "autofocus" in i;
}

Вместо написания собственной функции, вы можете использовать Modernizr для проверки поддержки автофокуса.

if (Modernizr.input.autofocus) {
// Автофокус работает!
} else {
// Нет поддержки автофокуса,
// придется снова обращаться к скриптам
}

Микроданные

Микроданные это стандартный путь добавить дополнительную семантику на ваши веб-страницы. К примеру, вы можете использовать микроданные для сообщения, что фотография доступна под специальной лицензией. Также вы можете применять микроданные для разметки страницы «Обо мне». Браузеры, их расширения и поисковые системы конвертируют разметку микроданных в vCard - стандартный формат для обмена контактной информацией.

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

Для проверки применяется . Если браузер поддерживает микроданные, тогда будет доступна функция getItems() для глобального объекта document . Если браузер не поддерживает микроданные, тогда эта функция будет недоступна.

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

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

API истории

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

Для проверки применяется . Если браузер поддерживает API истории, тогда будет доступна функция pushState() для глобального объекта history . Если браузер не поддерживает API истории, тогда эта функция будет недоступна.

function supports_history_api() {
return !!(window.history && history.pushState);
}

Вместо написания собственной функции, вы можете использовать Modernizr.

if (Modernizr.history) {
// Управление историей работает!
} else {
// Нет поддержки истории,
// попробуйте другие решения вроде

Последнее время я стал с завидной регулярностью получать вопросы, сводящиеся к одному: "". Помимо этого, я стал видеть большое количество заказчиков вёрстки, которые требуют, чтобы всё было написано на HTML5 . И чтобы было поменьше таких вопросов и не было таких безграмотных заказчиков (которым всегда радуются всякие мошенники на фрилансе, понимая, что заказчик не смыслит ничего), я и решил ответить на вопрос, почему не работает HTML5 .

Всё очень и очень просто. Поскольку HTML - это клиентский язык, следовательно, он выполняется браузером. Но разработчики браузеров не могут сразу прикрутить все новые теги и возможности, на это нужно много времени, даже очень много.

Из вышесказанного следует, что HTML5 не работает, поскольку он ещё просто не поддерживается браузерами . Но идёт постепенное внедрение данной технологии, и уже сейчас есть достаточно много тегов, которые уже можно использовать. Вы можете проверить, насколько Ваш браузер "продвинут" в HTML5 , здесь: тестирование браузера на поддержку HTML5 . Мой браузер (Firefox 15.0.1 ) набрал 346 очков, что, конечно, очень далеко до полной поддержки. Причём у меня стоит самая свежая версия Firefox . Думаю, у других современных браузеров ситуация не лучше.

Также не надо забывать, что даже, когда через пару лет, все современные браузеры будут полностью поддерживать HTML5 , останется ещё очень большая доля людей, которые будут пользоваться старыми браузерами. Что делать с ними? Чтобы уменьшить количество пострадавших, об HTML5 придётся подзабыть ещё на пару лет. И уже только потом можно будет делать вёрстку с использованием этой технологии.

Надеюсь, теперь Вы поняли, что можно, конечно, изучать HTML5 , но использовать его в полную силу у Вас не получится ни в качестве тренировки, ни в качестве практического использования.

Очень надеюсь, что количество жертв мошенников на фрилансе станет меньше (уж больно у многих написано в портфолио "Верстаю на чистом HTML5 ", что является ложью).

Это — не статья для супер-гуру-вебмастеров. И даже не для начинающих веб-разработчиков. Эта статья задумывалась как памятка об HTML5 для журналистов и аналитиков.

Здесь найдут ответы на свои насущные вопросы журналисты, копирайтеры и другие неспециалисты в области веб-дизайна, которым для работы просто необходимо знать принципы HTML5, но нет возможности вникать в технические подробности использования этого замечательного языка.

Также важно не забывать, что так называемые "демо-HTML» с самим HTML5 не имеют ровным счетом ничего общего. Например, во многом из Google Doodles используется DHTML — технология HTML 4 начала 2000х.

Зачем придумали HTML5?

HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка.

Как много браузеров поддерживают HTML5?

Смотря как посмотреть. Если исходить из того, что HTML5 произошел от HTML4, то все барузеры поддерживают какие-то свойства HTML5.

А с другой стороны, если вы хотите знать, какие браузеры содержат все свойства ядра HTML5 — то ни один. Они все обеспечивают выполнение некоторых частей спецификации (которая насчитывает более 700 страниц), но ни один не поддерживает все одновременно.

Если отбросить все несущественное, то все современные барузеры примерно в равной степени поддерживают HTML5, хоть они и добавляют поддержку тех или иных свойств в разное время.

Кто является движущей силой HTML5?

Началось все в 2004 году, в Opera, под руководством Яна Хиксона. Постепенно присоединились и другие браузеры. Хиксон ушел из Оперы в Google, где продолжает работать над спецификацией.

Будет справедливо сказать, что производители браузеров совместно координируют работу над спецификацией, равно как и W3C и многие другие организации и частные лица. Говоря обобщенно, процессом руководят потребности веб-разработчиков.

Кто пользуется HTML5?

Множество людей и компаний: Boston Globe Newspaper ; Nationwide Building Society , Yell.com и сотни других. На HTML5gallery.com собрано множество сайтов, применяющих HTML5-технологии.

Когда будет завершена работа над HTML5?

Возможно, в 2012 году. А может и в 2022. Это не так важно, важно другое: он сегодня уже поддерживается браузерами, а, следовательно, мы можем использовать его уже сегодня.

Сказать, что мы не можем пользоваться HTML5, потому что его развитие не завершено — это все равно, что сказать, что мы не можем говорить на русском языке, потому что он все еще развивается.

Правда ли, что HTML5 несовместим с Internet Explorer?

Абсолютная ерунда. IE9 хорошо поддерживает HTML5. В более старые браузеры можно добавить поддержку некоторых API с помощью JavaScript -технологии polyfilling, а также плагинов Flash и Silverlight. Элемент canvas может работать некорректно в версиях IE ниже 9. В основном, причиной проблем в старых браузерах является медленный движок JavaScript. Для отображения видео в старых браузерах можно использовать резервный Flash-вариант.

Стоит отметить, что многие возможности HTML5, такие, как атрибут contenteditable, позволяющий пользователю редактировать содержимое объекта, были придуманы Microsoft и включены уже в IE5.

Правда ли, что HTML5 предназначен для мобильных устройств?

Совершенно нет. В основе HTML5 лежат определенные принципы разработки , один из которых гласит о повсеместном его применении:

«Элементы должны разрабатываться для повсеместного использования... Элементы, по возможности, должны работать независимо от платформы, устройства и носителя.»

С другой стороны, есть особенности HTML5, которые особенно полезны в свете использования мобильных устройств. Если рассматривать «настоящий» HTML5, очень полезной окажется, к примеру, возможность продолжать работать с сайтом в оффлайне с помощью технологии Application Cache (“Appcache”).

Также преимуществом является возможность использовать элемент canvas для отображения анимации устройствами, которые по той или иной причине не могут использовать Flash.

Если рассматривать HTML5 в значении «новые супер-веб-технологии», то огромным плюсом является геолокация.

Вытеснит ли HTML5 Adobe Flash?

Нет — по крайней мере, я на это надеюсь. Многие годы Flash оставался единственной возможностью внедрить видео на страницу. Теперь, с появлением HTML5, появилось соперничество, в котором будут развиваться обе технологии, что просто замечательно для разработчиков.

Apple приняли решение не включать поддержку Flash своими iOS устройствами, что дает огромный толчок видео HTML5. Однако, стоит заметить, что iOS — не самая лучшая платформа и для HTML5.

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

Комментарии

емеля
4 октября 2011 в 22:29

html1 *THUMBS UP*

Olga Ответ:
октября 5, 2011 at 11:26 дп

Wdtime.ru Ответ:
февраля 20, 2016 at 10:32 пп

Полный список структурных тегов HTML 5 — wdtime.ru/blog/strukturnye-tegi-html-5

маргарита
5 октября 2011 в 14:01

емеля — дурачок, вы что, сказки не читали? :-D

Бублик
25 ноября 2011 в 14:47

жаль что некоторые пользователи немогут понять что есть браузеры лучше internet explorera:(

Olga Ответ:
ноября 25, 2011 at 4:03 пп

между прочим, ie очень неплохо в последнее время продвинулся в вопросах поддержки новых спецификаций. Видать, схватились за голову после того, как у пользователей винды появился выбор браузера:-D

Бублик Ответ:
ноября 25, 2011 at 4:11 пп

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


Исходя из того, что наиболее популярными или просто часто используемыми браузерами на данный момент являются Internet Explorer, Google Chrome, Mozlilla Firefox, Opera, Safari и еще... Maxthon, давайте проведем оценку уровня поддержки HTML5 этими популярными браузерами. Для оценки и выставления рейтинга будем использовать самый простой, удобный и бесплатный сервис The HTML5 test. Этот сервис выставляет оценку поддержки браузерами HTML5 в баллах и бонусных очках. Максимальное количество баллов 500, а бонусных очков 15. В будущем, если будет добавлено много новых тестов, то эти значения могут быть увеличены. На заметку: бонусные очки начисляются за поддержку аудио и видео элементов, а так же за поддержку SVG и MathML, и бонусные очки не суммируются с общими баллами.

Ну что же, давайте приступим к обзору. Браузеры будут располагаться в рейтинге по убыванию.

1 - Maxthon

Первое место, как бы ни было странно для некоторых, получает... да, кросс-платформенный браузер Maxthon (версия 4.0.6)!
Он получает 476 баллов и максимальное количество бонусных очков 15!

Бонусные очки Maxthon получил за: парсинг SVG и MathML (+2), поддержку видео-кодеков (+8) и аудио-кодеков (+5).

Если Вы до сих пор не знакомы с браузером Maxthon, то самое время его опробовать. Он работает под Windows, Android, Mac, iPhone и iPad, есть отлично русифицированный интерфейс, как самого браузера Maxthron, так и его сайта). Вы точно не пожалеете, если даже этот браузер не будет вашим основным, и больше зауважаете китайцев, его создателей:)

2 - Google Chrome

Второе место с очень маленьким отставанием от лидера получает Google Chrome (версия 27.0)!
Он получает 463 балла и 13 бонусных очков.

Бонусные очки Google Chrome получил за: парсинг SVG и MathML (+2), поддержку видео-кодеков (+6) и аудио-кодеков (+5).

В отличие от Maxthon, он поддерживает субтитры, но не поддерживает атрибуты микроразметки в тегах (Microdata).

3 - Opera

На третьем месте шведский браузер, любимый многими из постсоветского пространства, Opera (версия 12.15).
Он получает 404 балла и 9 бонусных очков.

Бонусные очки начислены для Opera за: парсинг SVG и MathML (+2), поддержку видео-кодеков (+4) и аудио-кодеков (+3).

В отличие от Google Chrome и Maxthon например, Opera не поддерживает формат аудио MP3.

4 - Mozilla Firefox

Четвертое место занимает Mozilla Firefox (версия 21.0). Жаль, что он пока отстает, пусть всего даже на каких-то 5 баллов, от Opera, ведь это мой основной браузер, с которым я работаю и отдыхаю. Хотя по бонусным очкам он компенсирует свое отставание.
Он получает 399 баллов и 14 бонусных очков.

Бонусные очки засчитаны Mozilla Firefox за: парсинг SVG и MathML (+2), поддержку видео-кодеков (+6) и аудио-кодеков (+6).

Как и Opera он к сожалению пока не поддерживает популярный формат аудио MP3.

5 - Microsoft Internet Explorer

На пятом месте, с большущим отставанием от топов, Internet Explorer (версия 10.0). Для меня например это и не странно, даже наоборот, более странно, что он не на последнем:)
Он получает 320 баллов и 6 бонусных очков.

Для IE 10 бонусные очки начислены за: парсинг SVG и MathML (+2) и слабенькую, но все же хоть какую-то поддержку видео-кодеков (+2) и аудио-кодеков (+2).

6 - Safari

На последнем шестом месте в нашем обзоре, с большущим отставанием от топов, и даже от IE 10, расположился Safari (версия 5.1.7). У меня пока не было под рукой ничего МАС-осовского, поэтому проверял только самую последнюю версию Safari под Windows.
Он получает 278 баллов и 2 бонусных очка.

Бонусные очки начислены только за парсинг SVG и MathML (+2).

Для видео и аудио у Safari вообще нет поддержки (по крайней мере для этой, самой последней Windows версии). На пару с IE10 этот Safari вообще не поддерживает доступ к веб-камере (Access the webcam), а вот ТОП-4 браузеров в этом обзоре оказывают такую поддержку.

Послесловие

Вот такой вот получается рейтинг поддержки HTML5 среди часто используемых или наиболее популярных браузеров. В ближайшее время может конечно же что-то измениться. Периодически усовершенствуются браузеры и выходят их новые версии. Правда ИМХО надеяться на IE и Safari, глядя на их никчемные на данное время «потуги», не стоит. Да и зачем, ведь в ТОП-4 отличные и бесплатные кросс-платформенные браузеры. Правда обидно наверное поклонникам Opera, что под Windows она уже свой движок практически прекратила развивать.

На сайте html5test.com (автор: Niels Leenheer) Вы можете в любое время протестировать практически любой браузер (причем разных версий), пусть даже «самописный», на предмет его поддержки HTML5. Там же Вы увидите более детальные отчеты и таблицы с оценками тех браузеров, которых у Вас нет, или тех версий, которые уже устарели или не поддерживаются вашей операционной системой (в большей степени это касается IE, который как клещ вцепился в Windows, и которого без обновлений самой системы видимо не получается «раскручивать»).

Приветствуются отзывы в комментариях о браузерах, представленных в данном рейтинге!