» » Перевірка технологій HTML5

Перевірка технологій HTML5
Перевірка технологій 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
Рисування

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
Відео

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 {
/ / Ні вбудованої підтримки відео
}


Перевірка технологій HTML5
Формати відео

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

«Язык» відео називається кодеком - це алгоритм , який використовується для кодування відео в потік бітів. У всьому світі поширене більше дюжини всяких кодеків. Який же з них вибрати? На жаль , браузери не можуть домовитися про єдиний кодеку для програвання відео. Тим не менше, їх кількість скоротилася до двох. Один з них вимагає грошових відрахувань (бо заснований на патенті ) , але працює в 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 ? Хто-небудь може його прочитати?

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


2424 02.10.13



Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера