Modernizr — HTML5 и CSS3 уже сегодня
Прогресс не остановить! 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> вполне можно.
Пример работы
Что-то вступительная речь затянулась. Пора и делом заняться. Итак, как же все это выглядит на практике?
Что качать?
- (9 Kb) — собственно библиотека.
Быстрый старт
Подключаем скрипт:
<script type="text/javascript" src="js/modernizr-1.7.min.js"></script>
Да вот, собственно, и все. Никакой дополнительной инициализации не требуется. Все возможности modernizr уже можно юзать.
Попробуем. Воплотим мечту. Перепишем пример про text-shadow, так чтобы он стал рабочим:
/* красивый выпуклый текст */
.textshadow h1 {
background: #999;
color: #999;
text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;
}
/* для непонимающих браузеров заменяем картинкой */
.no-textshadow h1 {
background: url(img/pic.png) no-repeat;
text-indent:-9999px;
}
А теперь подробнее
Только что приведенный CSS сработает правильно, так как плагин действительно автоматически поставит нужный класс для элемента HTML. Например, твой код может выглядеть так:
<html class=" js flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb no-hashchange no-history draganddrop no-websockets rgba hsla no-multiplebgs no-backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface video audio localstorage no-sessionstorage webworkers applicationcache svg no-inlinesvg no-smil svgclippaths"> <head> <!--и т.д. по тексту-->
Сколько проверок новых технологий, столько и классов. Конечно, получилось немного громоздко, но, с другой стороны, это очень скромная плата за удобство. Не забудь, классы добавляешь не ты, а скрипт!
Пример со скриптами
Как говорилось выше, кроме списка классов, Modernizr создает JavaScript объект. Давай посмотрим, как его использовать.
Например, нужно подключить нестандартный шрифт. Для этого воспользуемся @font-face, а для непонимающих его браузеров подключим cufon. Напишем простое условие:
if (!Modernizr.fontface)
{
getScript('cufon.withfont.min.js',function(){
Cufon.now();
});
}
Таблица проверяемых технологий HTML5/CSS3
| CSS3/HTML5 свойства и методы | JavaScript значение | название класса |
|---|---|---|
| @font-face | Modernizr.fontface | .fontface .no-fontface |
| Canvas | Modernizr.canvas | .canvas .no-canvas |
| Canvas Text | Modernizr.canvastext | .canvastext .no-canvastext |
| WebGL | Modernizr.webgl | .webgl .no-webgl |
| HTML5 Audio | Modernizr.audio | .audio .no-audio |
| HTML5 Audio форматы | Modernizr.audio[format] Например Modernizr.audio.mp3 |
— |
| HTML5 Video | Modernizr.video | .video .no-video |
| HTML5 Video форматы | Modernizr.video[format] Например Modernizr.video.avi |
— |
| rgba() | Modernizr.rgba | .rgba .no-rgba |
| hsla() | Modernizr.hsla | .hsla .no-hsla |
| border-image: | Modernizr.borderimage | .borderimage .no-borderimage |
| border-radius: | Modernizr.borderradius | .borderradius .no-borderradius |
| box-shadow | Modernizr.boxshadow | .boxshadow .no-boxshadow |
| text-shadow | Modernizr.textshadow | .textshadow .no-textshadow |
| Multiple backgrounds | Modernizr.multiplebgs | .multiplebgs .no-multiplebgs |
| background-size | Modernizr.backgroundsize | .backgroundsize .no-backgroundsize |
| opacity: | Modernizr.opacity | .opacity .no-opacity |
| CSS Animations | Modernizr.cssanimations | .cssanimations .no-cssanimations |
| CSS Columns | Modernizr.csscolumns | .csscolumns .no-csscolumns |
| CSS Gradients | Modernizr.cssgradients | .cssgradients .no-cssgradients |
| CSS Reflections | Modernizr.cssreflections | .cssreflections .no-cssreflections |
| CSS 2D Transforms | Modernizr.csstransforms | .csstransforms .no-csstransforms |
| CSS 3D Transforms | Modernizr.csstransforms3d | .csstransforms3d .csstransforms3d |
| Flexible Box Model | Modernizr.flexbox | .flexbox .no-flexbox |
| CSS Transitions | Modernizr.csstransitions | .csstransitions .no-csstransitions |
| Geolocation API | Modernizr.geolocation | .geolocation .no-geolocation |
| Input Types | Modernizr.inputtypes[type] например Modernizr.inputtypes.date |
— |
| Input Attributes | Modernizr.input[attribute] например Modernizr.input.placeholder |
— |
| localStorage | Modernizr.localstorage | .localstorage .no-localstorage |
| sessionStorage | Modernizr.sessionstorage | .sessionstorage .no-sessionstorage |
| Web Workers | Modernizr.webworkers | .webworkers .no-webworkers |
| applicationCache | Modernizr.applicationcache | .applicationcache .no-applicationcache |
| SVG | Modernizr.svg | .svg .no-svg |
| Inline SVG | Modernizr.inlinesvg | .inlinesvg .no-inlinesvg |
| SVG Clip Paths | Modernizr.svgclippaths | .svgclippaths .no-svgclippaths |
| SMIL | Modernizr.smil | .smil .no-smil |
| Web SQL Database | Modernizr.websqldatabase | .websqldatabase .no-websqldatabase |
| IndexedDB | Modernizr.indexeddb | .indexeddb .no-indexeddb |
| Web Sockets | Modernizr.websockets | .websockets .no-websockets |
| Hashchange Event | Modernizr.hashchange | .hashchange .no-hashchange |
| History Management | Modernizr.history | .history .no-history |
| Drag and Drop | Modernizr.draganddrop | .draganddrop .no-draganddrop |
| Cross-window Messaging | Modernizr.postmessage | .postmessage .no-postmessage |
| Touch (прикосновение к сенсорному экрану) | Modernizr.touch | .touch .no-touch |
Функция тестирования
Разработчики позаботились и о расширяемости. Если нужно протестить какую-то фишку, которую Modernizr пока не тестирует, можно использовать специальную функцию Modernizr.addTest(str,fn).
Например, протестируем поддержку position: fixed (тест должен дать отрицательный результат для IE6):
Modernizr.addTest('positionfixed', function () {
var test = document.createElement('div'),
control = test.cloneNode(false),
fake = false,
root = document.body || (function () {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}());
var oldCssText = root.style.cssText;
root.style.cssText = 'padding:0;margin:0';
test.style.cssText = 'position:fixed;top:42px';
root.appendChild(test);
root.appendChild(control);
var ret = test.offsetTop !== control.offsetTop;
root.removeChild(test);
root.removeChild(control);
root.style.cssText = oldCssText;
if (fake) {
document.documentElement.removeChild(root);
}
return ret;
});
Тестируем свой браузер
Демо-пример позволяет проверить твой браузер на поддержку HTML5/CSS3, а заодно покажет действие Modernizr в работе (в том числе и кроссбраузерное использование HTML5 тегов <section> и <footer>).
Выводы
Данная библиотека позволяет уже сегодня кроссбраузерно использовать некоторые элементы HTML5, а также на лету определять поддержку того или иного метода/свойства браузером, и, в зависимости от результата, применять нужные стили или выполнять определенные действия.
Материал
- Официальный сайт Modernizr