Modernizr практичне застосування - ремесло з wordpress

Перший крок

Для початку потрібно отримати свіжу версію бібліотеки з її офіційного сайту: Modernizr Download Builder.
Вкажи галочками ті технології, тести яких збираєшся проводити, потім створи свою персональну версію бібліотеки кнопкою «Generate». Якщо проставити всі галочки, отриманого коду вистачить на пару екранів невеликого ноутбука - всього 15 КБ.
Потім просто підключи його до своєї сторінки і перевір, як воно. Якщо все працює, у елемента HTML повинні з'явитися численні класи:

Як можна легко здогадатися: що додавав галочками в бібліотеку, ті тести і будуть виконані при підключенні Modernizr, а потім додані класи в залежності від браузера. Але не забудьте дати елементу HTML клас no-js. щоб спиратися на нього, коли JS у клієнта не включено.
Уже на цьому етапі можна створювати дуже ефективні таблиці стилів, наприклад:

Думаю, фантазія досвідченого верстальника підкаже приклади більш барвисті і розгорнуті.

Перевірка на присутність тієї чи іншої технології в браузері - тест.
На тести, які проводить Modernizr, можна чіпляти події. Тест пройдено - зачіпка yep. не пройдений - nope. Дуже мило.

yep - підключаю сценарій, який використовує геолокаційні можливості браузера.
nope - намагаюся обійтися без них в geo-polyfill.js.

Кажуть, що ось так теж можна робити:

А чому б і ні?

Ось приклад складніше:

Не так вже й складно, вірно?
і не чіпляйтеся до слова "полі-заповнювач" - MicroSoft відмінно його перевели.

Одна з крутих можливостей Modernizr.load - можливість вибудувати підключаються сценарії в чергу. Багатьом це може ні про що не говорити, але користувачі HTML5 Boilerplate швидше за все знайомі з запасним jQuery з Google CDN. Виглядає якось так:

Працює так: спочатку намагається завантажити jQuery в сценарії, а потім - відразу ж після, перевіряючи, що об'єкт jQuery доступний. Якщо немає, то намагається завантажити локальну копію jQuery. Це не так-то вже й просто, і Modernizr.load поспішає на допомогу. Йди ось такою логікою, і він візьме в свої руки порядок підключення сценаріїв:

Зауваження: використовуй цей метод лише для відкатів, тому як послідовна завантаження сценаріїв замість паралельної може сильно вдарити по швидкодії.

Можливість розширення

Дуже до речі розробники Modernizr дали можливість розширювати бібліотеку самостійно за допомогою Modernizr.addTest.
Найпростіший приклад:

У документації є розділ «Extensibility», присвячений розширюваності, де все детально описано. А в проекті на GitHub'е є папка, куди складають всі придатні для користувача розширення: / feature-detects /.

підтримка браузерів

IE6 +, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. На мобільних пристроях - Mobile Safari на iOS, Webkit на Android's, Opera Mobile, Firefox Mobile і є великі надії на підтримку Blackberry 6 +.

висновок

Відмінне підмога для проектів з плюс-мінус широкою аудиторією, коли хороша підтримка важливіше часу завантаження і виконання сторінки. Втім, якщо знати міру - можна і на прості односторінкові сайти його вішати, просто для зручності або навіть за справою.
Modernizr використовують в досить великих компаніях: twitter, Google, Microsoft.