Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

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

  1. бібліотека Modernizr
  2. малювання
  3. малювання тексту
  4. Відео
  5. локальна пам'ять
  6. Запитай професора Разметкіна
  7. Запитай професора Разметкіна
  8. Web Worker
  9. офлайнові додатки
  10. Запитай професора Разметкіна
  11. поля введення
  12. підказує текст
  13. автофокус форм
  14. мікродані
  15. history API
  16. подальше читання
  17. Автор и редактори

Наша взаимовыгодная связь https://banwar.org/

Коли ваш браузер відображає веб-сторінку, він створює об'єктну модель документа (Document Object Model, DOM) - набір об'єктів, представлених HTML-елементами на сторінці. Кожен елемент - кожен <p>, кожен <div> і кожен <span> - показаний в DOM самостійним об'єктом (є також глобальні об'єкти, на кшталт window або element, які ніяк не пов'язані з конкретними елементами).

Кожен елемент - кожен <p>, кожен <div> і кожен <span> - показаний в DOM самостійним об'єктом (є також глобальні об'єкти, на кшталт window або element, які ніяк не пов'язані з конкретними елементами)

До всіх DOM-об'єктів можна застосувати основні властивості, але деякі об'єкти мають більше властивостей, ніж інші. У браузерах, що підтримують можливості HTML5, окремі об'єкти мають унікальні властивості. Швидкий погляд на DOM підкаже вам, які можливості підтримуються.

Ось чотири основні методи для виявлення підтримуваних браузером технологій. Починаючи з найпростішої і закінчуючи складною.

1. Перевірка, що певні властивості доступні для глобальних об'єктів (таких як window або navigator).

приклад: тест на підтримку геолокації

2. Створюємо елемент, потім перевіряємо, що деякі властивості для цього елемента існують.

приклад: тест на можливість малювання

3. Створюємо елемент, потім перевіряємо, що деякі методи доступні для цього елемента, після чого викликаємо цей метод і дивимося яке значення.

приклад: тест для перевірки підтримуваних форматів відео

4. Створюємо елемент, встановлюємо деяке значення для властивості, потім перевіряємо, чи повертає властивість це значення.

приклад: тест для перевірки, які типи тега <input> підтримуються

бібліотека Modernizr

Modernizr - це JavaScript-бібліотека з відкритим вихідним кодом, яка розповсюджується за ліцензією MIT. Призначена для перевірки підтримки більшості технологій HTML5 та CSS3. Ви завжди повинні застосовувати останню версію бібліотеки. Для використання включите наступний елемент <script> в верхню частину свого документа.

Це повинно бути в <head>

<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Занурення в HTML5 </ title> <script src = "modernizr.min.js"> </ script> </ head > <body> ... </ body> </ html>

Modernizr запускається автоматично, так що не треба використовувати ніякої функції modernizr_init () для виклику бібліотеки. При запуску створюється глобальний об'єкт з ім'ям Modernizr, який містить набір булевих властивостей для кожної виявленої технології. Наприклад, якщо браузер не підтримує Canvas API, то Modernizr.canvas поверне false.

if (Modernizr.canvas) {// Можна що-небудь малювати! } Else {// На жаль, немає вбудованої підтримки малювання}

малювання

малювання

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

Для перевірки Canvas API використовується техніка №2 . Якщо ваш браузер підтримує Canvas API, то в DOM буде елемент <canvas>, у якого є метод getContext (). Якщо браузер не підтримує Canvas API, для <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 ( '2d'); 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 ( '2d');

Остаточно потрібно перевірити, чи є в контексті малювання функція fillText (). Якщо так, значить малювання тексту доступно. Ура!

return typeof context.fillText == 'function';

Замість написання своєї функції ви можете використовувати Modernizr для визначення підтримки малювання тексту.

if (Modernizr.canvastext) {// Можна малювати текст! } 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 {// Ні вбудованої підтримки відео // Може замість варто використовувати QuickTime або Flash? }

}

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

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

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

Web Worker

технологія Web Worker забезпечує стандартний спосіб запуску JavaScript в браузері в фоновому режимі. За допомогою Web Worker ви можете породжувати кілька «потоків», які запускаються одночасно, раніше чи пізніше. Ці «фонові потоки» можуть виробляти складні математичні розрахунки, робити мережеві запити або здійснювати доступ до локального сховища, поки користувач перегортає документ, клацає мишею або набирає текст.

Для перевірки підтримки фонових обчислень використовується техніка №1 . Якщо ваш браузер підтримує Web Worker API, то глобального об'єкту window буде доступно властивість Worker. В іншому випадку властивість Worker буде недоступно.

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

Замість написання своєї функції ви можете використовувати Modernizr для визначення підтримки Web Worker.

if (Modernizr.webworkers) {// window.Worker доступно! } Else {// Ні вбудованої підтримки Web Worker}

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

офлайнові додатки

офлайнові додатки

Читати статичні веб-сторінки без мережі досить просто: підключаєтеся до Інтернету, завантажуєте веб-сторінку, відключаєтеся від Інтернету, їдете в відокремлене місце і читаєте сторінки на дозвіллі. Для заощадження часу можна пропустити крок щодо відокремленого місця. Але як щодо веб-додатків подібних Gmail або Google Docs? Спасибі HTML5, тепер будь-який (а не тільки Google) може створити додаток, яке буде працювати автономно.

оффлайнові додаток починається як онлайнове. Коли ви перший раз відвідуєте сайт, який підтримує офлайнову роботу, веб-сервер повідомляє браузеру, які файли і в якому порядку потрібні д ля роботи. Це можуть бути будь-які файли - HTML, JavaScript, зображення, навіть відео. Як тільки браузер завантажить всі необхідні файли, ви можете відвідувати сайт навіть без підключення до Інтернету. Ваш браузер буде повідомлений, що ви відключені від мережі, і треба використовувати завантажені раніше файли. Коли ви наступного разу ввійдете в мережу, будь-які зроблені вами зміни можуть бути відіслані на веб-сервер.

Перевірити підтримку офлайнових додатків можна з використанням техніки №1 . Якщо ваш браузер підтримує цю технологію, буде доступно властивість 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. Але я все одно в цій книзі говорю про неї, тому що ця частина еволюції Інтернету відбувається прямо зараз.

Для перевірки підтримки геолокації використовується техніка №1 . Якщо браузер підтримує геолокацію, буде доступно властивість geolocation для глобального об'єкта navigator. В іншому випадку властивість geolocation буде недоступно. Ось як перевірити підтримку геолокації.

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

Замість написання своєї функції, можна використовувати Modernizr.

if (Modernizr.geolocation) {// Можна дивитися, де ви знаходитеся! } Else {// Ні вбудованої підтримки геолокації. }

Якщо браузер не підтримує початково геолокацію, не варто втрачати надію. GeoPosition.js - це бібліотека JavaScript, яка покликана забезпечити підтримку геолокації в старих браузерах, на зразок Blackberry, Palm OS і Microsoft Internet Explorer 6, 7 і 8. Це не те ж саме, що navigator.geolocation API, але служить тієї ж мети.

Для старих мобільних платформ, включаючи BlackBerry , Nokia , Palm і OMTP BONDI , Є також специфічне API для геолокації.

Подробиці про це йдуть в окремому розділі про геолокації.

поля введення

поля введення

Ві добре там, де все про форми, чи не так? Пишемо <form>, вставляємо кілька <input type = "text">, може бути <input type = "password"> і закінчуємо кнопкою <input type = "submit">.

Ви не знаєте і половини. HTML5 визначає більш десятка нових полів для введення, які ви можете використовувати в своїх формах.

  1. <Input type = "search"> для пошуку
  2. <Input type = "number"> для введення чисел
  3. <Input type = "range"> для повзунка
  4. <Input type = "color"> для вибору кольору
  5. <Input type = "tel"> для телефонного номера
  6. <Input type = "url"> для веб-адрес
  7. <Input type = "email"> для поштових адрес
  8. <Input type = "date"> для вибору календарної дати
  9. <Input type = "month"> для місяця
  10. <Input type = "week"> для тижні
  11. <Input type = "time"> для часу
  12. <Input type = "datetime"> для зазначення дати і часу
  13. <Input type = "datetime-local"> для місцевої дати і часу

Перевірка на підтримку полів введення відбувається за допомогою техніки №4 . Спочатку ви повинні створити фіктивний елемент <input> в пам'яті. За замовчуванням значенням атрибута type для елемента <input> виступає text. Надалі це виявиться важливо.

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

Далі, міняємо значення атрибута type для фіктивного елементу <input> на перевіряється.

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

Якщо браузер підтримує вказане поле введення, тоді властивість type поверне встановлене значення. В іншому випадку браузер проігнорує це значення і поверне text.

return i.type! == "text";

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

if (! Modernizr.inputtypes.date) {// Ні вбудованої підтримки для <input type = "date">}

підказує текст

підказує текст

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

Для перевірки підказує тексту застосовується техніка №2 . Якщо ваш браузер підтримує цю можливість, в DOM буде створено об'єкт відповідний <input>, у якого є властивість placeholder. В іншому випадку, це властивість для <input> буде недоступно.

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

Замість написання своєї функції, ви можете використовувати Modernizr для перевірки.

if (Modernizr.input.placeholder) {// підказує текст буде видно! } Else {// Немає підтримки підказує тексту, // треба використовувати скрипти}

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

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

Веб-сайти можуть використовувати JavaScript для автоматичного переміщення фокуса до першого елементу форми. Наприклад, на головній сторінці сайту Google.ru включений автофокус для введення пошукового запиту, тому не доводиться переміщати в нього курсор. Це зручно для більшості людей, за винятком просунутих користувачів. Якщо натиснути пробіл, відбудеться прокрутка сторінки, але не у випадку використання автофокусу, оскільки фокус знаходиться в текстовому полі. Замість прокрутки в тексті буде набрано пробіл. Якщо фокус знаходиться в іншому текстовому полі, поки сторінка завантажується, скрипт автофокусу може «послужливо» перенести фокус назад до вихідного полю, тим самим змушуючи вас набирати текст в невірному місці.

Оскільки автофокус робиться на JavaScript, можуть виникнути складності при вирішенні цих крайніх випадків, і не так вже й багато рішень для тих людей, які не бажають, щоб їх фокус «викрадають».

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

Перевірка підтримки автофокусу заснована на техніці №2 . Якщо браузер підтримує автофокусування в формах, в DOM буде створено об'єкт для подання <input>, у якого є властивість autofocus. В іншому випадку це властивість не буде доступно. Ви можете перевірити автофокус за допомогою наступної функції.

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

Замість написання своєї функції, ви можете використовувати Modernizr для перевірки підтримки автофокусу.

if (Modernizr.input.autofocus) {// Автофокус працює! } Else {// Немає підтримки автофокусу, // доведеться знову звертатися до скриптів}

мікродані

мікродані

мікродані це стандартний спосіб забезпечити додаткову семантику на ваших веб-сторінках. Наприклад, ви можете використовувати мікродані для повідомлення, що фотографія доступна під спеціальної ліцензією Creative Commons. Також ви можете застосовувати мікродані для розмітки сторінки «Про мене». Браузери, їх розширення і пошукові системи конвертують розмітку мікроданних в vCard - стандартний формат для обміну контактною інформацією.

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

Для перевірки застосовується техніка №1 . Якщо браузер підтримує мікродані, тоді буде доступна функція getItems () для глобального об'єкта document. Якщо браузер не підтримує мікродані, тоді ця функція буде недоступна.

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

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

Бібліотека Modernizr не містить засобів для перевірки мікроданних, тому необхідно використовувати функцію, як показано вище

history API

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

Для перевірки застосовується техніка №1 . Якщо браузер підтримує API історії, тоді буде доступна функція pushState () для глобального об'єкта history. Якщо браузер не підтримує API історії, тоді ця функція буде недоступна.

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

Замість написання своєї функції, ви можете використовувати Modernizr.

if (Modernizr.history) {// Управління історією працює! } Else {// Немає підтримки історії, // спробуйте інші рішення на кшталт History.js }

подальше читання

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

JavaScript-бібліотеки:

Інші статті:

Автор и редактори

Автор: Марк Пілігрим

Остання зміна: 20.08.2018

Редактори: Влад Мержевіч

Else {// Ні вбудованої підтримки відео // Може замість варто використовувати QuickTime або Flash?
Який же з них вибрати?
Але яке?
Локальна пам'ять дійсно є частиною HTML5?
Чому ж воно виділено в окрему специфікацію?
Як щодо безпеки мого сховища HTML5?
Хто-небудь може його прочитати?
Але як щодо веб-додатків подібних Gmail або Google Docs?
Геолокація це частина HTML5?
Чому ми говоримо про неї?
Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    https://banwar.org/
    Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: