Modernizr що це використання modernizr 3

викачуємо Modernizr

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

У цьому файлі описано налаштування, які визначають вихідний файл Modernizr:

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

flexboxwrap (нова властивість у версії 3),

Цей файл буде використовуватися командним рядком Modernizr. За допомогою наступної команди встановіть CLI і NPM:

Тепер нам доступні команди бібліотеки. Щоб запустити команду необхідно перейти в папку, куди був завантажений файл конфігурації JSON. Наприклад, вводимо повний шлях до файлу конфігурації:

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

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

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

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

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

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

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

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

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

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

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

У попередніх версіях 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 () працює з усіма властивостями, але краще його застосовувати тільки для властивостей, які тестуються в асинхронному режимі:

apng (анімований PNG)