modernizr

Библиотека JS Modernizr — использование и сфера применения

Nikel, 05.04.2015

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

Таким образом вы можете решить, стоит ли добиваться кроссбраузерности используя JavaScript или довольствоваться  изящной деградацией. Кроме того, Modernizr делает новые элементы HTML5 доступными для понимания Internet Explorer.

Скрипт также по сути может заменять условные комментарии, за исключением того, что при проверке теперь упор делается не на версию браузера, а на его возможности (например IE9 не поддерживает transitions, c помощью Modernizr можно это выявить и подключить соответствующий скрипт, который поможет решить проблему).

Преимущества Modernizr

  • Он проверяет более 40 характеристик в считанные миллисекунды
  • Он создает JavaScript-объект  Modernizr, содержащий результаты этих тестов для каждого свойства в виде логического значения (true, false)
  • Он добавляет классы к HTML-элементу, что очень наглядно демонстрирует, какие свойства есть , а какие изначально не поддерживаются.
  • Он предоставляет  загрузчик ресурсов (скриптов, стилей).

Конфигурирование и установка Modernizr

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

Modernizr download

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

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

Modernizr Download Builder

После того, как мы определимся с тестами, которые потребуется выполнить, генерируем скрипт. Теперь его можно скачать. Подключить Modernizr к странице тоже не составит особого труда, просто разместим его между тегами  head.

Работа скрипта

Теперь перейдем непосредственно к рассмотрению как действует Модернизр.
Когда скрипт запущен, он будет проверять все свойства, которые требуется и добавлять к элементу html соответствующие классы. В результате элемент html примет вид, подобный этому.

Как видим, для тех свойств, которые не поддерживаются, создается класс с приставкой no-. Например,  no-geolocation.

Как использовать полученные классы?

Например, мы  хотим использовать  свойство CSS-columns , которое позволяет браузерам грамотно разделить список на колонки. Конечно, не каждый браузер поддерживает CSS столбцы, поэтому для этих браузеров мы применим float.

Стили для браузеров, поддерживающих CSS-columns

Стили для браузеров, неподдерживающих CSS-columns

Как уже упоминалось, сценарий также создает объект JavaScript, называемый просто Modernizr, который содержит список свойств,  с логическими значениями. Это можно использовать в своих целях. Так в нижеприведенном коде Modernizr.csstransforms  будет true, если браузер поддерживает трансформации (выведется сообщение  csstransforms поддерживаются), и false (csstransforms не поддерживаются), если браузер их не поддерживает.

Другая интересная возможность, которую представляет скрипт  — Modernizr.load — загрузчик ресурсов (CSS и javascript). Он может быть очень полезен, если мы хотим подключить скрипты и стили для тех  браузеров, которые не поддерживают какие-то свойства.

Вот пример базового синтаксиса загрузчика:

Разберем построчно, что все это обозначает.

  • Первая секция 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’ загружается в любом случае. Когда все ресурсы будут загружены выполняется функция.

На этом все, спасибо за внимание!