Визначення підтримки HTML5 та CSS3 у браузері за допомогою Modernizr

html5

При використанні HTML5/CSS3 на вашому веб-сайті виникає проблема сумісності зі старими браузерами іModernizr - це хороший спосіб вирішення цієї проблеми для користувачів зі старими/не підтримуючими стандартами браузерами.

Крім того, Modernizr додає підтримку стилів HTML5-елементів. Це дозволяє використовувати більш семантичні, перспективні елементи, такі як , і не турбуючись про те, що вони не запрацюють в Internet Explorer.

Як це працює

Для встановлення Modernizr, скачайте скрипт із цієї сторінки. Потім між тегами head вашого сайту додайте посилання на файл. Наприклад:

Потім додайте у ваш html-тег клас "no-js":

Що це означає? Давайте подивимося. У цьому прикладі я відкрив сторінку в Firefox 3.5. Цей браузер (на жаль) не підтримує множинні фонові зображення, CSS градієнти або CSS трансформацію, тому Modernizr додає класи "no-multipebgs", "no-cssgradients" та "no-csstransforms". З іншого боку, він підтримує canvas і border-radius, відповідно додаються класи "canvas" та "borderradius". І т.д.

Як це використати.

Припустимо, нам потрібно задати кілька фонових зображень для фону, css буде виглядати так:

Але старі браузери проігнорують ці стилі, тому, використовуючи Moderniz, ми визначимо такі правила:

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