Использование Modernizr 3.0. Краткий обзор

Использование Modernizr 3.0. Краткий обзор

От автора: браузеры становятся все быстрее, принимаются новые стандарты, но на деле у нас просто не остается выбора – нам приходится поддерживать старые версии браузеров. Вкратце, нам нужно использование библиотеки Modernizr.

Modernizr – что это? Это JavaScript библиотека, которая сканирует браузер на поддержку тех или иных свойств, и все доступные свойства помечаются в теге html в качестве классов или в качестве свойств объекта Modernizr. Недавно библиотека получила несколько крупных обновлений с новыми свойствами, изменениями и улучшениями. В этой статье мы по новой изучим Modernizr. Взглянем, что нам может предложить версия 3.0!

Скачиваем Modernizr

Предыдущие версии были доступны как в тестовых сборках (неминифицированные версии) так и с пользовательскими настойками. Можно было выбрать отдельные свойства и API. Скачать библиотеку можно на странице загрузки. В Modernizr 3 появилась командная строка CLI, через нее можно сделать все то же самое, что и в прошлых версиях. Сначала выберите свойства, которые вам потребуются. Также опционально можно скачать файл конфигурации JSON.

В этом файле описаны настройки, которые определяют выходной файл Modernizr:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В примере ниже показан минимальный набор библиотеки. Выходной файл будет минифицирован и будет содержать только три свойства:

flexbox,

flexboxwrap (новое свойство в версии 3),

transition

Этот файл будет использоваться командной строкой Modernizr. С помощью следующей команды установите CLI и NPM:

Теперь нам доступны команды библиотеки. Чтобы запустить команду необходимо перейти в папку, куда был загружен файл конфигурации JSON. К примеру, вводим полный путь к файлу конфигурации:

Файл должен быть уже сгенерирован и готов к использованию на вашем сайте:

Пример сгенерированного файла Modernizr через CLI

Разбираемся с классами

Проверяемые свойства записываются как название класса в теге html. Также в корень добавляется класс js. Если в теге html был класс no-js, он заменяется. Следующий скриншот снят с последней версии Chrome на момент написания статьи; как видно, html содержит все проверяемые классы, значит, браузер поддерживает все свойства.

Если браузер не поддерживает проверяемое свойство, библиотека добавит класс с префиксом no-. В IE9, который не поддерживает ни одно из свойств, мы будем наблюдать следующую картину:

Если flexbox поддерживается, можно использовать такие стили, как:

И фолбэк под старые версии:

Префиксы в классах

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

В Modernizr 3 данную опцию можно настроить через файл JSON в свойстве classPrefix. К примеру:

Запустите командную строку и заново создайте файл. Теперь все классы с префиксом is-.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

JavaScript: определение свойств

В предыдущих версиях Modernizr при определении поддерживаемого свойства, к примеру, flexbox, мы писали так:

Было, конечно, пару исключений, связанных с дефисами и пробелами, как в свойстве display: table, display: run-in, exif-orientation и т.д. В таких случаях тест приходилось писать так:

В третьей версии все названия свойств сделали одним словом без дефисов и пробелов, что делает код более последовательным. Теперь если взять пример выше, мы можем протестировать свойство exif-orientation точно так, как и свойство flexbox:

Это изменение отразилось и на классах в теге html. Если открыть панель разработчика, то теперь класс exif-orientation написан без дефиса. Классы, которые объявлены в устаревшей форме будут записаны в обеих вариантах. На скриншоте ниже видно, что классы display-table и display-fit присутствуют как слитно, так и с дефисом.

Новые методы тестирования

Тесты некоторых свойств работают в асинхронном режиме, что вызывает проблемы с задержкой. Поэтому, при запуске теста на новый формат изображений webp, к примеру, Modernizr вернет undefined, а не true или false.

Так как получение результатов теста в асинхронном режиме стало одним из любимых методов, в версию 3 решили добавить новую функцию Modernizr.on(). Теперь тест вернет правильное значение:

Помните, что технически метод Modernizr.on() работает со всеми свойствами, но лучше его применять только для свойств, которые тестируются в асинхронном режиме:

webp

apng (анимированный PNG)

jpeg-xr

dataworkers

blobworkers

exif-orientation

csshyphens

flash

data-uri

Замечание по YepNope

Разработка библиотеки YepNope была приостановлена из-за новых версий загрузчиков и менеджеров типа Require.js. В Modernizr 2 был метод Modernizr.load(), который загружал JS файлы.

Но, так как YepNope устарел, то и данный метод был удален из Modernizr 3. Так что просмотрите свой код на вызов старого метода, если у вас в планах обновиться до третьей версии.

Заключение

Modernizr долгое время была самой используемой библиотекой в моих проектах, так что обновление вызывает у меня чувство трепета. Modernizr 3 был полностью переделан. А 99 новых тестов вообще сносят крышу! Следуйте указаниям в этой статье и создайте свой собственный билд.

Автор: Thoriq Firdaus

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Alexey

    После вывода команды modernizr -c ~/мойпуть/modernizr-config.json вылезает ошибка ‘window’ — определение отсутствует. Бьюсь над решением.

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree