Modernizr — HTML5 и CSS3 уже сегодня

Автор: Егор Скорняков и Александр Головко Дата публикации: 01.03.2011

Прогресс не остановить! 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> вполне можно.

Пример работы

Что-то вступительная речь затянулась. Пора и делом заняться. Итак, как же все это выглядит на практике?

Что качать?

Быстрый старт

Подключаем скрипт:

<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, а также на лету определять поддержку того или иного метода/свойства браузером, и, в зависимости от результата, применять нужные стили или выполнять определенные действия.

Материал