Modernizr – это js-файл который, позволяет определить поддерживает ли используемый браузер отдельные возможности HTML, CSS и JavaScript. Подключение к странице осуществляется с помощью стандартного тега <script> (в пределах тега <head>).
Для чего это нужно? Например, вы хотите узнать, поддерживает ли ваш браузер (или браузер пользователя) определение местоположения по широте и долготе? Может да, а может и нет. Дабы не устраивать гадания на кофейной гуще воспользуемся нашим новым чудо-инструментом)
Где скачать?
Для того чтобы начать пользоваться modernizr необходимо его скачать, сделать это можно перейдя по ссылке на официальный сайт.
Если нажать на прямоугольник, то можно скачать полную версию modernizr:
А если на кнопку "Скачать", то только необходимые вам ф-ции:
Формат файла может быть либо js, либо json.
Как работает?
Принцип работы modernizr довольно прост: сразу после подключения файла к странице добавляется одноименный объект, проверяющий, поддерживает ли браузер обозначенные вами возможности. Каждая функция которую вы хотели бы проверить становится свойством объекта Modernizr. Каждое из этих свойств имеет свое логическое значение (true или false), которые говорят о наличии или отсутствии поддержки.
Modernizr можно использовать в качестве условной инструкции, если данное свойство возвращает true значит будет выполнен код в фигурных скобках.
Пример
В данном примере мы скачали и подключили js-файл с шестью функциями: HTML5 Audio Element, Canvas text, Web Cryptography, Geolocation API, JSON, Vibration API. В Яндекс-браузере это выглядит вот так:
А в IE вот так:
Тег <html> подчеркнут не случайно, т.к. именно в нем содержится ответ на главный вопрос: "Поддерживает ли данный браузер интересующие нас ф-ции?" Яндекс-браузер поддерживает их все, а IE только пять из шести (от этом говорит приставка "no-", относящаяся к последнему значению атрибута class). Точно таким же образом проверяется работоспособность всех оставшихся функций.
Спасибо за внимание!
Остались вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)
Если статья оказалась полезной предлагаю подписаться на канал.
