Modernizr - html5 і css3 вже сьогодні

Прогрес не зупинити! HTML5 та CSS3 впевненим кроком йдуть по просторах інтернету. У той же час вимоги кросбраузерності (в тому числі і підтримку старих версій браузерів) ніхто не відміняв.

Виходить нестиковочка. З одного боку, я хочу використовувати нові потужні web-технології. З іншого боку ігнорувати відвідувачів зі старими браузерами не можна! Та й серед нових браузерів підтримка HTML5 та CSS3 далеко не така повна, як хотілося б. Як же бути?

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

Щось типу такого:

Ех! Мрії-мрії ... А, ні! Чи не мрії. Реальність!

Modernizr - тест браузера на здатності

Modernizr - це js бібліотека, що дозволяє на ходу визначити підтримку web-технологій нового покоління. Реалізовано два варіанти перевірок.

Можна посилатися на заздалегідь визначений клас (який автоматично присвоюється елементу HTML). Цей клас буде відрізнятися для браузерів підтримують або не підтримує ту чи іншу фішку. Різниця буде в префікс ".no-". Наприклад ".multiplebgs / .no-multiplebgs" (перелік класів наведено нижче). Це як раз той варіант, який я тільки що описував у вигляді мрії. Приємно, чорт забирай, коли мрії збуваються!

HTML5 і IE

Приємне доповнення - Modernizr вчить IE розуміти основні елементи HTML5. Принцип такий же, як у html5shiv. Тому не варто чекати чудес. Теги

приклад роботи

Щось вступна промова затягнулася. Пора і справою зайнятися. Отже, як же все це виглядає на практиці?

Що качати?

Швидкий старт

Так ось, власне, і все. Ніякої додаткової ініціалізації не потрібно. Всі можливості modernizr вже можна юзати.

Спробуємо. Втілимо мрію. Перепишемо приклад про text-shadow. так щоб він став робочим:

А тепер докладніше

Тільки що наведений CSS спрацює правильно, так як плагін дійсно автоматично поставить потрібний клас для елемента HTML. Наприклад, твій код може виглядати так:

Скільки перевірок нових технологій, стільки і класів. Звичайно, вийшло трохи громіздко, але, з іншого боку, це дуже скромна плата за зручність. Не забудь, класи додаєш не ти, а скрипт!

Приклад зі скриптами

Наприклад, потрібно підключити нестандартний шрифт. Для цього скористаємося @ font-face. а для нерозуміючих його браузерів підключимо cufon. Напишемо просту умову: