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

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

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

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

Скачиваем Modernizr

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

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

{
  "minify": true,
  "options": [
    "setClasses"
  ],
  "feature-detects": [
    "test/css/flexbox",
    "test/css/flexwrap",
    "test/css/transitions"
  ]
}

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

flexbox,

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

transition

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

npm install -g modernizr

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

modernizr -c ~/Downloads/modernizr-config.json

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

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

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

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

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

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

.flexbox .column {
    display : flex;
}

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

.no-flexbox .column {
    display : block;
}

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

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

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

{
  "minify": true,
  "classPrefix": "is-",
  "options": [
    "setClasses"
  ],
  "feature-detects": [
    "test/css/flexbox",
    "test/css/flexwrap",
    "test/css/transitions"
  ]
}

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

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

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

if ( ! Modernizr.flexbox ) {
 elem.matchHeight();
}

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

if ( ! Modernizr["exif-orientation"]) {
  fallbackFunctions();
}

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

if ( ! Modernizr.exiforientation ) {
  fallbackFunctions(); 
}

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

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

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

console.log( Modernizr.webp ); // undefined

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

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 файлы.

Modernizr.load({
  test: Modernizr.flexbox,
  nope: 'matchHeight.js'
});

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

Заключение

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

Автор: Thoriq Firdaus

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree