От автора: браузеры становятся все быстрее, принимаются новые стандарты, но на деле у нас просто не остается выбора – нам приходится поддерживать старые версии браузеров. Вкратце, нам нужно использование библиотеки Modernizr.
Modernizr – что это? Это JavaScript библиотека, которая сканирует браузер на поддержку тех или иных свойств, и все доступные свойства помечаются в теге html в качестве классов или в качестве свойств объекта Modernizr. Недавно библиотека получила несколько крупных обновлений с новыми свойствами, изменениями и улучшениями. В этой статье мы по новой изучим Modernizr. Взглянем, что нам может предложить версия 3.0!
Скачиваем Modernizr
Предыдущие версии были доступны как в тестовых сборках (неминифицированные версии) так и с пользовательскими настойками. Можно было выбрать отдельные свойства и API. Скачать библиотеку можно на странице загрузки. В Modernizr 3 появилась командная строка CLI, через нее можно сделать все то же самое, что и в прошлых версиях. Сначала выберите свойства, которые вам потребуются. Также опционально можно скачать файл конфигурации JSON.
В этом файле описаны настройки, которые определяют выходной файл Modernizr:
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "minify": true, "options": [ "setClasses" ], "feature-detects": [ "test/css/flexbox", "test/css/flexwrap", "test/css/transitions" ] } |
В примере ниже показан минимальный набор библиотеки. Выходной файл будет минифицирован и будет содержать только три свойства:
flexbox,
flexboxwrap (новое свойство в версии 3),
transition
Этот файл будет использоваться командной строкой Modernizr. С помощью следующей команды установите CLI и NPM:
|
1 |
npm install -g modernizr |
Теперь нам доступны команды библиотеки. Чтобы запустить команду необходимо перейти в папку, куда был загружен файл конфигурации JSON. К примеру, вводим полный путь к файлу конфигурации:
|
1 |
modernizr -c ~/Downloads/modernizr-config.json |
Файл должен быть уже сгенерирован и готов к использованию на вашем сайте:
Пример сгенерированного файла Modernizr через CLI
Разбираемся с классами
Проверяемые свойства записываются как название класса в теге html. Также в корень добавляется класс js. Если в теге html был класс no-js, он заменяется. Следующий скриншот снят с последней версии Chrome на момент написания статьи; как видно, html содержит все проверяемые классы, значит, браузер поддерживает все свойства.
Если браузер не поддерживает проверяемое свойство, библиотека добавит класс с префиксом no-. В IE9, который не поддерживает ни одно из свойств, мы будем наблюдать следующую картину:
Если flexbox поддерживается, можно использовать такие стили, как:
|
1 2 3 |
.flexbox .column { display : flex; } |
И фолбэк под старые версии:
|
1 2 3 |
.no-flexbox .column { display : block; } |
Префиксы в классах
Перед загрузкой билда можно добавить префикс ко всем классам на случай, если у вас в ваших стилях уже есть такой же класс.
В Modernizr 3 данную опцию можно настроить через файл JSON в свойстве classPrefix. К примеру:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "minify": true, "classPrefix": "is-", "options": [ "setClasses" ], "feature-detects": [ "test/css/flexbox", "test/css/flexwrap", "test/css/transitions" ] } |
Запустите командную строку и заново создайте файл. Теперь все классы с префиксом is-.
JavaScript: определение свойств
В предыдущих версиях Modernizr при определении поддерживаемого свойства, к примеру, flexbox, мы писали так:
|
1 2 3 |
if ( ! Modernizr.flexbox ) { elem.matchHeight(); } |
Было, конечно, пару исключений, связанных с дефисами и пробелами, как в свойстве display: table, display: run-in, exif-orientation и т.д. В таких случаях тест приходилось писать так:
|
1 2 3 |
if ( ! Modernizr["exif-orientation"]) { fallbackFunctions(); } |
В третьей версии все названия свойств сделали одним словом без дефисов и пробелов, что делает код более последовательным. Теперь если взять пример выше, мы можем протестировать свойство exif-orientation точно так, как и свойство flexbox:
|
1 2 3 |
if ( ! Modernizr.exiforientation ) { fallbackFunctions(); } |
Это изменение отразилось и на классах в теге html. Если открыть панель разработчика, то теперь класс exif-orientation написан без дефиса. Классы, которые объявлены в устаревшей форме будут записаны в обеих вариантах. На скриншоте ниже видно, что классы display-table и display-fit присутствуют как слитно, так и с дефисом.
Новые методы тестирования
Тесты некоторых свойств работают в асинхронном режиме, что вызывает проблемы с задержкой. Поэтому, при запуске теста на новый формат изображений webp, к примеру, Modernizr вернет undefined, а не true или false.
|
1 |
console.log( Modernizr.webp ); // undefined |
Так как получение результатов теста в асинхронном режиме стало одним из любимых методов, в версию 3 решили добавить новую функцию Modernizr.on(). Теперь тест вернет правильное значение:
|
1 2 3 4 5 |
Modernizr.on( 'webp', function( result ) { if ( result ) { console.log(result); // true or false; } }); |
Помните, что технически метод Modernizr.on() работает со всеми свойствами, но лучше его применять только для свойств, которые тестируются в асинхронном режиме:
webp
apng (анимированный PNG)
jpeg-xr
dataworkers
blobworkers
exif-orientation
csshyphens
flash
data-uri
Замечание по YepNope
Разработка библиотеки YepNope была приостановлена из-за новых версий загрузчиков и менеджеров типа Require.js. В Modernizr 2 был метод Modernizr.load(), который загружал JS файлы.
|
1 2 3 4 |
Modernizr.load({ test: Modernizr.flexbox, nope: 'matchHeight.js' }); |
Но, так как YepNope устарел, то и данный метод был удален из Modernizr 3. Так что просмотрите свой код на вызов старого метода, если у вас в планах обновиться до третьей версии.
Заключение
Modernizr долгое время была самой используемой библиотекой в моих проектах, так что обновление вызывает у меня чувство трепета. Modernizr 3 был полностью переделан. А 99 новых тестов вообще сносят крышу! Следуйте указаниям в этой статье и создайте свой собственный билд.
Автор: Thoriq Firdaus
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (1)