Використання Modernizr 3.0. Короткий огляд

17

Від автора: браузери стають все швидше, приймаються нові стандарти, але на ділі у нас просто не залишається вибору – нам доводиться підтримувати старі версії браузерів. Коротенько, нам потрібно використання бібліотеки Modernizr.

Modernizr – що це? Це JavaScript бібліотека, яка сканує браузер на підтримку тих чи інших властивостей, і всі доступні властивості позначаються в тегу html в якості класів або в якості властивостей об’єкта Modernizr. Нещодавно бібліотека отримала кілька великих оновлень з новими властивостями, змінами і поліпшеннями. У цій статті ми за новою вивчимо Modernizr. Поглянемо, що нам може запропонувати версія 3.0!

Викачуємо Modernizr

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

Використання Modernizr 3.0. Короткий огляд

У цьому файлі описані налаштування, які визначають вихідний файл 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 3.0. Короткий огляд

Приклад згенерованого файлу Modernizr через CLI

Розбираємося з класами

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

Використання Modernizr 3.0. Короткий огляд

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

Використання Modernizr 3.0. Короткий огляд

Якщо flexbox підтримується, можна використовувати такі стилі, як:

.flexbox .column {
display : flex;
}

І фолбэк під старі версії:

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

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

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

Використання Modernizr 3.0. Короткий огляд

У Modernizr 3 дану опцію можна налаштувати через файл JSON властивості classPrefix. Наприклад:

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

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

Використання Modernizr 3.0. Короткий огляд

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 присутні як разом, так і з дефісом.

Використання Modernizr 3.0. Короткий огляд

Нові методи тестування

Тести деяких властивостей працюють в асинхронному режимі, що викликає проблеми з затримкою. Тому, при запуску тесту на новий формат зображень 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 нових тестів взагалі зносять дах! Дотримуйтесь інструкцій в цій статті і створіть свій власний білд.