Як використовувати Modernizr

1. огляд Modernizr
2. Як працює Modernizr
3. Що мені дасть ця (цінна) інформація?
4. Множинні фони на CSS
5. HTML5
6. JavaScript
7. висновок

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

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

огляд Modernizr

Незважаючи на те, що можливості CSS3 використовуються веб-дизайнерами все більше і більше, підтримка цих можливостей браузерами значно відстає.

Останнім часом я використовую Modernizr практично постійно для того, щоб виділити ті браузери, які не підтримують специфічні властивості стандарту CSS3.

Як працює Modernizr

Для того, щоб встановити Modernizr, спочатку скачайте його з цієї сторінки - http://www.modernizr.com/ . Потім всередині тега head html-сторінки підключіть розпакований з архіву файл modernizr-1.0.min.js:

Другим кроком буде підключення класу no-js для кореневого елемента html:

Для чого необхідно підключати клас no-js до елементу html?

Тому що елемент html з класом no-js буде станом сторінки за замовчуванням. Якщо JavaScript (js) на сторінці відключений, то скрипт Modernizr також не працюватиме (спільно з усіма іншими функціями сторінки, зав'язаними на цій мові), тому було б добре, якщо у нас буде можливість відкоту (fallback) для цього випадку.

Прим. перекладача: спробую від себе пояснити в двох словах, але інакше (якщо раптом незрозуміло) що хотіла сказати прекрасна дівчина, автор статті. Якщо на сайті відключена підтримка JavaScript, то клас no-js для елемента html - це та "зачіпка", на яку можна повісити все CSS-fallback'і для цього випадку.

Якщо ж підтримка JavaScript в браузері включена, то станеться динамічна підміна класу no-js для елемента html на цілу групу інших класів. В результаті вихідний код сторінки може виглядати приблизно так:

class = "js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">

Вражає, чи не так? Але що означають всі ці класи? Давайте розберемося.

В даному випадку, сторінка була відкрита в браузері Firefox 3.5. Цей браузер (на жаль) не підтримує множинні фони на CSS, CSS-градієнти і CSS-трансформації.

Скрипт Modernizr вміє автоматично визначати можливості браузера, в якому відкрито поточний веб-сторінка. Для кожного з CSS-властивостей в скрипті Modernizr є свої власні класи для їх позначення.

Наприклад, множинні фони на CSS "позначені" як multipebgs, CSS-градієнти як cssgradients, CSS-трансформації як csstransforms і так далі.

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

Якщо браузер підтримує CSS-властивість трансформації, то на елемент html скрипт Modernizr "підчепить" клас csstransforms. А якщо браузер не підтримує це властивість, то Modernizr додасть для імені класу csstransforms префікс no- і також "повісить" цей клас на елемент html, але у вигляді no-csstransforms. І так далі …

Приклад такого списку-звіту і був показаний вище.

Що мені дасть ця (цінна) інформація?

Логічне запитання - "а що ми можемо робити з цією інформацією?". Добре, давайте розглянемо простий приклад.

Множинні фони на CSS

Фон вашого сайту ретельно відбудований і ви використовуєте множинні фони для того, щоб зробити його більш простим і швидким за допомогою CSS-коду.

Ваш CSS виглядає наступним чином:

#nice {background: url (background-one.png) top left repeat-x, url (background-two.png) bottom left repeat-x; }

І браузер генерує цей прекрасний (адже не дарма ж ідентифікатор має ім'я nice) фон так:

При використанні бібліотеки Modernizr ваш код CSS повинен бути перетворений в такий вигляд:

#nice {background: url (background-one.png) top left repeat-x; } .Multiplebgs #nice {background: url (background-one.png) top left repeat-x, url (background-two.png) bottom left repeat-x; }

І ось що побачать відвідувачі сайту в залежності від того, яким браузером (розуміє він множинний фон чи ні) вони користуються:

Це дуже простий приклад використання скрипта Modernizr, але він повинен послужить зразком того, що можна зробити за допомогою даної бібліотеки.

HTML5

Бібліотека Modernizr також дозволяє використовувати нові елементи, доступні в HTML5 - header, footer, section, hgroup, video і так далі і стилізувати їх.

Однак, це не означає, що всі ці елементи можна використовувати також в браузері IE. Але ви можете стилізувати ці елементи і тоді IE "зрозуміє" їх і не зможе ігнорувати.

Прим. перекладача: загадкова фраза, яка особисто мені ні про що не говорить. Потребує подальшого вивчення.

JavaScript

Ви також можете аналізувати в вашому власному JavaScript можливості, які підтримує Modernizr, використовуючи приклад наступного синтаксису:

if (Modernizr. geolocation) {...}

висновок

Сподіваюся, мені вдалося пояснити, для чого потрібен Modernizr і наскільки він корисний в повсякденній роботі. Так як ми не можемо повністю покладатися на той факт, що браузери підтримують всі властивості, які ми хочемо використовувати, то бібліотека Modernizr є найкращим засобом для того, щоб об'єднати два світи - один, де все можливо, і інший, де все можливо лише частково .

Оригінал статті - How to use Modernizr