Бібліотека js modernizr - використання і сфера застосування

Nikel-blog.ru »HTML і CSS» Бібліотека JS Modernizr - використання і сфера застосування

Коли ви впроваджуєте Modernizr в html-сторінку, він визначає чи підтримує поточний браузер CSS3 функції, такі як box-shadow, border-radius, @ font-face, border-image, rgba () і так далі, а також HTML5 функції, такі як audio, video, сховище localstorage, і нові типи, атрибути елемента .

Конфігурація і установка Modernizr

Давайте для початку відвідаємо офіційний сайт. На головній сторінці нам пропонують завантажити останній реліз.

Можна вибрати з двох варіантів: повна, Незжата версія для детального ознайомлення - Development і власна сконфигурированная версія, яка містить тільки ті тести, що потрібні вам - Production (ви можете створити її за допомогою інструментів на сайті).
Тиснемо на кнопку Production і дивимося які компоненти доступні для включення в наш скрипт.
Це основні властивості CSS3, можливості HTML5, SVG, можливості геолокації і т.п. крім того, тут присутній блок Non Core Detects в якому можна знайти тести тих властивостей, які не віднесені до основних, наприклад, тут є CSS- і SVG-фільтри.

У блоці Extra обрані ті функції, які зазвичай включені в скрипт за замовчуванням - html5shiv (вчить IE6-8 розпізнавати теги HTML5), Modernizr.load [], Add CSS Classes

Після того, як ми визначимося з тестами, які потрібно виконати, генеруємо скрипт. Тепер його можна завантажити. Підключити Modernizr на сторінку теж не складе особливих труднощів, просто розмістимо його між тегами head.

Розберемо по рядках, що все це означає.

• Перша секція test містить ту технологію / властивість, які потрібно протестувати (geolocation)
• Друга секція yep виконується в тому випадку, якщо технологія підтримується (при цьому завантажується ресурс - скрипт або стиль css, який там вказано (geo.js))
• Третя секція nope. виконується в тому випадку, якщо технологія не підтримується (при цьому завантажується ресурс - скрипт або стиль css, який там вказано (geo-polyfill.js))

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

• Секція both. містить ресурси, які будуть завантажені в будь-якому випадку
• Секція complete. виконується коли всі ресурси будуть завантажені.
• Секція load. просте завантаження якогось ресурсу

Примітно, що ресурси можуть завантажуватися не тільки по одному, але також у вигляді цілого масиву в квадратних дужках.

Наведемо приклад більш складного коду, вбудованого в html-сторінку. Як можна бачити тут спочатку проводяться тести властивостей fontface і cssgradients, якщо тести не пройдені, то завантажується масив ресурсів script1.js і style.css. Потім проводиться тест на властивість csstransforms, якщо він не пройдений завантажується script2.js, при цьому масив ресурсів 'app.js', 'extra.js' завантажується в будь-якому випадку. Коли всі ресурси будуть завантажені виконується функція.