Modernizr - основні принципи та приклади використання статті та уроки створення сайту на wordpress

Більшість посібників висвітлюють основні приклади використання Modernizr. просто показуючи синтаксис і не пояснюючи навіщо і чому це слід робити. А все від того, що багато веб-розробники використовують цю бібліотеку не в повну силу, і не знають про багатьох її доповнення, доступних за умовчанням.

Modernizr володіє наступними основними можливостями, цікавими для розробників:

Виявлення можливостей: за допомогою CSS

Після завантаження, Modernizr тестує клієнтський браузер на сумісність з HTML5 та CSS3 і додає HTML елементам використовують ці властивості відповідні класи. Це дозволяє вам використовувати різні стилі для елементів, в залежності від підтримки тієї чи іншої можливості.

Наприклад, якщо відкрити сторінку використовує Modernizr в одній з останніх версій Chrome, то HTML елемент буде виглядати приблизно так:

Використання впроваджених класів

Отже, ми дізналися які можливості підтримуються, але що ж робити з цією інформацією?

Ми можемо застосовувати різний CSS в залежності від запровадженого класу в HTML елемент:

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

Проблема: простіше заплутатися

Якщо кожне CSS-правило буде писатися для окремої можливості, яка може або підтримуватися чи ні, то код стає досить заплутаний:

До одного елементу може застосовуватися ціла низка стилів, що не дуже зручно.

«.no-feature» або «.feature» ??

На мій погляд, найбільш оптимально використовувати селектори для відсутньої функціональності (наприклад no-opacity) замість додавання наявної функціональності (наприклад opacity). У так разі, якщо з якої-небудь причини Modernizr не завантажили, то в хороших і сучасних браузерах нічого страшного з вашим сайтом не відбудеться.

У наведеному вище прикладі, в разі якщо Modernizr не завантажили, то клас boxshadow не буде доданий, і його імітація буде у всіх браузерах - і нових і старих.

А якщо використовувати такий код, то в разі якщо Modernizr не завантажили, то відвідувачі з сучасними браузерами (а їх більшість) побачать справжній boxshadow. У той же час, браузери нерозуміючі boxshadow проігнорують його.

Використовуйте резервні варіанти

У більшості випадків ви можете використовувати CSS3 як «резервний варіант», оскільки старі браузери його просто проігнорують, а сучасні виберуть останнє визначення властивості. Таким чином можна позбутися від необхідності використовувати класи впроваджувані Modernizr.

Багато користувачів, багато браузерів

У більшості випадків відвідувачі бачать ваш сайт тільки в одному браузері, так що він повинен добре виглядати в будь-якому браузері і не обов'язково абсолютно однаково. Якщо якісь CSS властивості не працюють в старому браузері - просто змиріться з цим.

Так наприклад, якщо IE6-8 не вказує закруглені кордону вашого меню навігації, то з цим можна спокійно жити, а не городити жахи для імітації цих самих круглих куточків.

Коли варто використовувати класи

Існує кілька випадків, коли слід використовувати впроваджувані класи Modernizr:

1. Якщо запасний варіант не працює

Наприклад якщо ви хочете використовувати background: # 000; opacity: 0.25; то браузери не підтримують прозорість будуть відображати чорний фон, в той час як він повинен бути сірий (#ccc). Уникнути цього можна наступним чином:

2. Якщо зміни незначні або специфічні

Наприклад якщо ви хочете прибрати стрілку випадаючого меню навігації для пристроїв з сенсорним екраном:

Виявлення можливостей: За допомогою JS

Вони можуть бути використані прямо в вашому коді:

Це також може бути корисно наприклад для при проектуванні для пристроїв з сенсорними екранами.

Очевидно що для сенсорних пристроїв зовсім марні hover-ефекти і для них слід придумати щось інше. Наприклад взагалі прибрати цей ефект, і відобразити повну версію.

Користувачі настільних комп'ютерів будуть бачити hover-ефект при наведенні курсору на елементи.
Для сенсорних пристроїв:

Ці користувачі будуть бачити відразу повну версію.
Залежно від доступності тієї чи іншої функції, такий як localStorage. вам може знадобитися передбачити абсолютно різні рішення. В такому випадку наприклад було б зручно довантажувати необхідні додаткові JS бібліотеки при відсутності підтримки localStorage. Це легко зробити за допомогою Modernizr.load ().

Modernizr.load () також відомий як yepnope.js

Якщо «test» повертає true (тобто браузер підтримує localstorage), тоді буде завантажений localstorage.js, в іншому випадку буде завантажений localstorage-alternative.js. «Yep» і «Nope» опційні, так що ви можете використовувати всього один з них:

Modernizr.load / Yepnope.js це швидкий і легкий завантажувач скриптів, який доступний відразу після підключення Modernizr.