Що таке modernizr і як з ним працювати, блог web-розробника

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

Як же веб-дизайнеру або розробнику дізнатися чи буде працювати певна функція на цільових платформах і браузерах?

установка Modernizr

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

Щоб встановити Modernizr необхідно додати скрипт для кожної сторінки, яка буде його використовувати. Ось основний документ HTML5:

Цей скрипт треба завантажувати саме в head документа, а не в нижній частині сторінки, де зазвичай розташовуються скрипти для здійснення більшої продуктивності. Для правильної роботи modernizr.js маємо в секції head.

Введення класів в HTML за допомогою Modernizr

Ви напевно вже помітили, що в розмітці вишe тегу html присвоєно клас "no-js". Під час завантаження сторінки Modernizr замінить цей клас на "js". Потім, разом з класом js бібліотека додасть класи для всіх функцій, які браузер підтримує, а також класи функцій, які браузер не підтримує.

Наприклад, ось як виглядає тег html для поточної версії Chrome:

А ось як виглядає цей тег для браузера Internet Explorer 7:

Ви можете використовувати ці класи в CSS для створення специфічних стилів для браузерів які не підтримують будь-які новий властивості. Наприклад, ви хочете надати стиль кнопці з частковою прозорістю:

Якщо браузер не підтримує CSS властивість opacity, кнопка відобразиться з чорним фоном замість сірого напівпрозорого.

Використовуючи клас доданий modernizr, можна перевизначити початковий стиль:

Ви також можете підійти до цього питання в зворотному порядку, тобто спочатку задати стиль для старих браузерів, а потім для браузерів з підтримкою opacity:

Наступна перевірка може бути використана для створення логічних гілок:

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

завантажувач Modernizr

У наведеному вище прикладі, завантажувач визначає, чи підтримує браузер LocalStorage. Якщо так, то станеться асинхронна завантаження файлу localStorage.js. Якщо підтримки не буде виявлено, то замість цього буде завантажений файл alt-storageSystem.js.

Використання Shims і Polyfills

Ви можете використовувати Modernizr.load () щоб "пропатчити" браузер за допомогою shims (це шматочки коду, які імітують відсутність функціональності браузера) і polyfills (певні класи shims, які служать для реплікації відсутньої функціональності). Таким чином, якщо shim або polyfill для функції доступні, ви можете виправити будь-які відсутні функції в браузері користувача, якщо, наприклад, клієнт зажадає, щоб зовнішній вигляд і функціональність була максимально однаковий у всіх браузерах.

Хорошим прикладом є HTML5 тег input для поля з датою. Для підтримуваних браузерів доступний надійний datepicker:

Але це підтримується приблизно тільки для половини браузерів. Є хороший резервний метод з ипользованием jquery ui і polyfill. За допомогою завантажувача Modernizr ми можемо завантажити 4 файлу, необхідних для відтворення вибору дати для підтримуються браузерів:

Коли необхідно використовувати Polyfill, я використовую два ресурси, ними є HTML5Please і Webshims Lib. Обидва цих сайту пропонують великий набір рішень, але я рекомендую зрозуміти і вивчити shim або polyfill, перш ніж почати користуватися цими сервісами, так як в цьому випадку ви будете готові до будь-яких потенційних проблем, які можуть виникнути.

Ще одним перевагу Modernizr в тому, що html5shim включений в бібліотеку. Бібліотека html5shim дозволяє коректно обробляти нові теги HTML5 старими браузерами IE.

Робота Modernizr з Internet Explorer

На допомогу до бібіліотека html5shim в роботі з IE, Modernizr також забезпечує набір умовних класів. Ці класи дозволяють встановлювати CSS правила, які орієнтовані на конкретні версії IE. Для виклику класів для IE досить розмістити перед html такий код:

Наприклад, якщо в вашому дизайні активно використовується властивість bpx-shadow, яка не підтримується IE6-IE8, визначити стилі для цих браузерів можна так:

Створення користувальницької версії Modernizr

Коли ви будете готові розгорнути цю бібліотеку для свого сайту, рекомендується створити свою версію Modernizr, яка буде містити тільки ті елементи, які дійсно потрібні вам. Це допоможе зменшити розмір файлу від 42 кб (без стиснення) до всього лише 2 кб. Щоб вибрати потрібні параметри можете використовувати сторінку завантаження Modernizr: