Перевірка технологій html5
Коли ваш браузер відображає веб-сторінку, він конструює об'єктну модель документа (Document Object Model, DOM) - набір об'єктів, представлених HTML-елементами на сторінці.
До всіх DOM-об'єктів можна застосувати основні властивості, але деякі об'єкти мають більше властивостей, ніж інші. У браузерах, які підтримують можливості HTML5, окремі об'єкти мають унікальні властивості. Заглядання в DOM підкаже вам, які можливості підтримуються.
Ось чотири основних техніки для дослідження підтримуваних браузером технологій. Починаючи з простіший і закінчуючи комплексної технікою. 1. Перевірка що певні властивості доступні для глобальних об'єктів (таких як window або navigator).
2. Створюємо елемент, потім перевіряємо, що властивості для цього елемента існують.
3. Створюємо елемент, потім перевіряємо, що деякі методи доступні для цього елемента, потім викликаємо цей метод і дивимося повертається значення.
4. Створюємо елемент, встановлюємо для певних його властивостей значення, потім перевіряємо, чи повертаються ці значення.
Бібліотека Modernizr
Відкрите програмне забезпечення Modernizr це javascript- бібліотека, поширювана за ліцензією MIT, для перевірки підтримки більшості можливостей HTML5 та CSS3. На момент написання книги остання версія 1.6, переконайтеся, що у вас свіжа версія. Для використання дозволите наступний рядок в ваш документ.
<! DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title> Занурення в HTML5 </ title >
<scrірt src="modernizr.min.js"> </ script >
</ head >
<body>
...
</ body >
</ html >
Modernizr запускається автоматично, так що не треба використовувати жодної функції modernizr_init ( ) для виклику бібліотеки. При запуску створюється глобальний об'єкт Modernizr, який містить булево значення для кожної технології. Приміром, якщо браузер підтримує тег
<canvas>
то Modernizr.canvas поверне true. Якщо браузер не підтримує цю можливість, то Modernizr.canvas поверне false .
if ( Modernizr.canvas ) {
/ / Можна небудь малювати!
} Else {
/ / На жаль, немає вбудованої підтримки малювання
}
Рисування
HTML5 визначає тег
<canvas>
як « полотно для растрової графіки, який може використовуватися для відображення діаграм, комп'ютерних ігор або виведення інших зображень на льоту». Сам полотно представляє собою прямокутник на сторінці, в якому за допомогою javascript малюється, що ви побажаєте. HTML5 визначає набір функцій званих « Canvas API » для малювання фігур, контурів, створення градієнтів і трансформації .
Для перевірки Canvas API використовується техніка № 2. Якщо ваш браузер підтримує малювання, в DOM буде елемент
<canvas>
, до якого застосуємо метод getContext ( ). Якщо браузер не підтримує малювання, для
<canvas>
працюватимуть тільки основні властивості, але ніяк не специфічні .
function supports_canvas () {
return ! ! document.createElement (' canvas '). getContext ;
}
Ця функція створює фіктивний елемент
<canvas>
Такий елемент не застосовується до документа, його навіть не можна побачити. Він тільки покоїться в пам'яті, ніде і нічого не робить, подібно човні в безтурботним річці .
return ! ! document.createElement (' canvas '). getContext ;
Коли ви створюєте фіктивний
<canvas>
його можна перевірити на наявність методу 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 для тексту був завершений.
Перевірка на малювання тексту заснована на техніці № 2. Якщо ваш браузер підтримує малювання, то для створеного елемента
<canvas>
буде доступний метод getContext ( ). Якщо браузер не підтримує малювання, для
<canvas>
працюватимуть тільки основні властивості, але ніяк не специфічні .
function supports_canvas_text () {
if (! supports_canvas ( )) { return false ;}
var dummy_canvas = document.createElement (' canvas ');
var context = dummy_canvas.getContext ('2 d ');
return typeof context.fillText == ' function ';
}
Даний приклад починається з перевірки на можливість малювання, використовуючи функцію supports_canvas ( ), ви її бачили в попередньому розділі. Якщо браузер не підтримує Canvas API, значить, немає і малювання тексту!
if (! supports_canvas ( )) { return false ;}
Далі, ви створюєте фіктивний елемент
<canvas>
і отримуєте його контекст. Це гарантовано працює, оскільки функція supports_canvas ( ) вже перевірила, що метод getContext ( ) існує для всіх об'єктів
<canvas> .
var dummy_canvas = document.createElement (' canvas ');
var context = dummy_canvas.getContext ('2 d ');
Нарешті, ви перевіряєте, чи є в контексті малювання функція fillText ( ). Якщо так, значить малювання тексту доступно.
return typeof context.fillText == ' function ';
Замість написання своєї функції ви можете використовувати Modernizr для визначення підтримки малювання тексту.
if ( Modernizr.canvas ) {
/ / Можна небудь малювати!
} Else {
/ / На жаль, немає вбудованої підтримки малювання
}
Відео
HTML5 визначає новий елемент, названий
<video>
для розміщення відео на вашу сторінку без використання сторонніх плагінів кшталт Apple QuickTime ® або Adobe Flash ® .
Тег
<video>
налаштований для використання без всяких визначених скриптів. Ви можете вказати декілька відеофайлів і браузери, які підтримує HTML5 -відео, виберуть той формат, з яким вони працюють.
Браузери, які не підтримують HTML5 -відео, повністю ігнорують тег
<video>
але це можна використати у своїх інтересах і вказати браузеру програвати відео через сторонній плагін. Крок Кемен назвав таке рішення Відео для кожного!, В ньому використовується HTML5 -відео, якщо воно доступне і звернення до QuickTime або Flash для старих браузерів. Це рішення не використовує javascript і працює фактично у всіх браузерах включаючи мобільні .
Якщо ви хочете більшого, ніж булькання відео та його виведення на веб - сторінці, необхідно використовувати javascript. При перевірці на підтримку відео використовується техніка № 2. Якщо браузер підтримує HTML5 -відео, в DOM буде створений об'єкт, асоційований з
<video>
у якого є метод canPlayType ( ). Якщо браузер відео не підтримує, то для створеного в DOM об'єкта будуть працювати тільки типові властивості, доступні для всіх елементів. Ви можете перевірити підтримку відео за допомогою наступної функції .
function supports_video () {
return ! ! document.createElement (' video '). canPlayType ;
}
Замість написання своєї функції ви можете використовувати Modernizr для визначення підтримки відео.
if ( Modernizr.video ) {
/ / Дивимося кіно!
} Else {
/ / Ні вбудованої підтримки відео
}
Формати відео
Формати нагадують мови, на яких говорять і пишуть люди. У Росії деякі газети можуть виходити на англійській мові, але якщо ви читаєте тільки по- російськи, навряд чи вони будуть для вас корисні. Для програвання відео браузер повинен розуміти той «язик», на якому написано відео.
«Язык» відео називається кодеком - це алгоритм, який використовується для кодування відео в потік бітів. У всьому світі поширене більше дюжини всяких кодеків. Який же з них вибрати? На жаль, браузери не можуть домовитися про єдиний кодеку для програвання відео. Тим не менше, їх кількість скоротилася до двох. Один з них вимагає грошових відрахувань (бо заснований на патенті ), але працює в Safari і iPhone. Інший кодек вільний і працює в таких браузерах як Chrome і Firefox.
Для перевірки на підтримку форматів відео використовується техніка № 3. Якщо браузер підтримує HTML5 -відео, в DOM буде створений об'єкт, асоційований з
<video>
у якого є метод canPlayType ( ). Цей метод говорить про те, що браузер підтримує деякі формати.
Ця функція перевіряє, що формат H.264 підтримується.
function supports_h264_baseline_video () {
if (! supports_video ( )) { return false ;}
var v = document.createElement ( " video " ) ;
return v.canPlayType (' video/mp4 ; codecs = " avc1.42E01E, mp4a.40.2 " ');
}
Функція починається з перевірки на підтримку HTML5 - відео за допомогою функції supports_video ( ), про неї йшлося у попередньому розділі. Якщо браузер не підтримує відео, значить, не підтримує і формати !
if (! supports_video ( )) { return false ;}
Потім створюється фіктивний елемент
<video>
який не буде видно і викликається метод canPlayType ( ). Цей метод гарантовано буде доступний, оскільки функція supports_video ( ) це забезпечує.
var v = document.createElement ( " video " ) ;
Відео формат насправді це комбінація різних речей. У технічній термінології ви питаєте браузер, чи може він програти відео H.264 із звуком AAC в контейнері MPEG -4.
return v.canPlayType (' video/mp4 ; codecs = " avc1.42E01E, mp4a.40.2 " ');
Функція 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 використовується техніка № 1. Якщо браузер підтримує цю технологію, то буде доступно властивість 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 ? Хто-небудь може його прочитати? О. Тільки ті, хто має безпосередній доступ до вашого комп'ютера, можуть переглянути (або змінити) ваші дані в сховищі. Через браузер будь-який сайт може прочитати і модифікувати власні значення, але інші сайти не зможуть отримати до них доступ.