Прогресс не остановить! HTML5 и CSS3 уверенным шагом идут по просторам интернета. В то же время требования кроссбраузерности (в том числе и поддержку старых версий браузеров) никто не отменял.
Получается нестыковочка. С одной стороны, я хочу использовать новые мощные web-технологии. С другой стороны игнорировать посетителей со старыми браузерами нельзя! Да и среди новых браузеров поддержка HTML5 и CSS3 далеко не такая полная, как хотелось бы. Как же быть?
Вот если бы
существовал способ налету проверять браузер на поддержку той или иной новой технологии, или, еще лучше, просто и удобно разделить стили по принципу «если ты понимаешь CSS3-фишку, используй ее, а если нет — вот тебе старое решение».-
/* красивый выпуклый текст */
-
ДляТехКтоПонимаетCSS3 h1 {
-
background: #999;
-
color: #999;
-
text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;
-
}
-
/* для непонимающих браузеров заменяем картинкой */
-
ДляТехКтоНеПонимаетCSS3 h1 {
-
background: url(img/pic.png) no-repeat;
-
text-indent:-9999px;
-
}
Эх! Мечты-мечты… А, нет! Не мечты. Реальность!
Modernizr — тест браузера на способности
Modernizr - это js библиотека, позволяющая на ходу определить поддержку web-технологий нового поколения. Реализовано два варианта проверок.
Можно ссылаться на заранее определенный класс (который автоматически присваивается элементу HTML). Этот класс будет отличаться для браузеров поддерживающих или не поддерживающих ту или иную фишку. Различие будет в префиксе ".no-". Например ".multiplebgs/.no-multiplebgs" (перечень классов приведен ниже). Это как раз тот вариант, который я только что описывал в виде мечты. Приятно, черт возьми, когда мечты сбываются!
Второй вариант — использовать созданный плагином объект JavaScript, который называется Modernizr и содержит массу булевых свойств, сигнализирующих о поддержке конкретных HTML5 и CSS3 технологий.
HTML5 и IE
Приятное дополнение — Modernizr учит IE понимать основные элементы HTML5. Принцип такой же, как у html5shiv. Поэтому не стоит ждать чудес. Теги <audio>, <video> и <svg> в IE6-8 не заработают. Тем не менее, использовать структурные теги типа <section> или <footer> вполне можно.
Сайт библиотеки: Modernizr
Успехов!