Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

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

modernizr

Когда вы внедряете 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

Конфигурирование и установка 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). Он может быть очень полезен, если мы хотим подключить скрипты и стили для тех  браузеров, которые не поддерживают какие-то свойства.

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

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

В этом примере в зависимости от того поддерживается в браузере geolocation или нет загружаются разные скрипты. Сделав это, мы избавляем пользователей от необходимости загружать лишний код и повышаем производительность.
Конечно, это не самый сложный пример, кроме того могут присутствовать и другие секции:

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

Приведем пример более сложного кода, встроенного в html-страницу. Как можно видеть здесь сначала проводятся тесты свойств fontface и cssgradients, если  тесты не пройдены, то загружается массив ресурсов script1.js и style.css. Затем проводится тест на свойство csstransforms, если он не пройден загружается script2.js,  при этом массив ресурсов  ‘app.js’, ‘extra.js’ загружается в любом случае. Когда все ресурсы будут загружены выполняется функция.

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

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*