Modernizr — бархатный путь в HTML5

Очевидно, что нам необходим инструмент, решающий проблемы совместимости браузеров и новых технологий. И такой инструмент уже есть!

Modernizr — это небольшая библиотека JavaScript, распространяемая по лицензии MIT & BSD, призванная разрешать конфликты, вызванные разной степенью поддержки браузерами технологий HTML5 (canvas, аудио, видео, локальные хранилища и т. д.) и CSS3 (градиент, border-radius, трансформации). В настоящее время библиотека поддерживает свыше 40 различных технологий, и этот список открыт для пополнения.

Для работы с библиотекой прежде всего следует генерировать нужную конфигурацию Modernizr на сервере программы http:// modernizr. com/download/ (рис. 4). После выбора необходимых опций будет сгенерирован JavaScript-код, который следует сохранить в файл modernizr. min. js (при этом будет сформирована ссылка вида Http://www. modernizr. com/download/#-applicationcache-canvas-Canvastext-draganddrop-hashchange-history-audio-video-indexeddb — input-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv — cssclasses-teststyles-hasevent-prefixes-domprefixes-load, перейдя по которой, можно воспроизвести процедуру генерации).

Рис. 4. Создаем собственную конфигурацию Modernizr

Использовать Modernizr очень просто. Достаточно подключить библиотеку к странице:

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>Погружение в HTML5</title>

<script src=”modernizr. min. js”></script> </head>

<body>

</body>

</html>

Все, более ничего не требуется, все функции теперь доступны. Если мы посмотрим нашу страницу посредством Mozilla Firebug или аналогичной программы, то обнаружим, что к тегу <html> было добавлено множество классов (по классу на каждое свойство, проверку которых мы выбрали при генерации библиотеки):

<html class=” js canvas canvastext no-webgl no-touch geolocation no-cssgradients postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets video audio localstorage sessionstorage webworkers applicationcache svg no-inlinesvg no-smil svgclippaths”>

Естественно, названия классов будут содержать или не содержать частицу «no-» в зависимости от того, поддерживает ли конкретный API используемый браузер. Как видите, с HTML5 элементом canvas и с geolocation API проблем в приведенном примере нет, чего не скажешь про поддержку технологий WebGL или indexeddb (я специально использую тут относительно древний FireFox 3.6).

Как с этим работать? Да очень просто — modernizr определил классы, нам осталось их использовать — например, задать в CSS-таблицах различные способы показа для поддерживаемых и неподдерживаемых элементов:

.no-cssgradients. bar{

Background: url(”images/button. png”);

}

.cssgradients. bar {

Background-image: linear-gradient(top, #555, #333);

}

Так мы задаем линейный градиент некоего элемента — в случае поддержки подобной технологии браузером — и заменяем его фоновой картинкой в противном случае. Таким образом, для корректного отображения страниц нам во многих случаях может вообще не понадобиться никакого дополнительного кода — только подключение moderizr.

Кстати, если продолжим исследовать созданный нами документ, то обнаружим, что модернизация страницы не ограничивалась дополнительными классами — у нас теперь появилась встроенная CSS:

<head>

<style>

Article, aside, details, figcaption,

Figure, footer, header, hgroup, nav, section{

Display:block

}

Audio {

Display:none

}

Canvas, video{

Display:inline-block;

*display:inline:

*zoom:1

}

[hidden]{

Display:none

}

Audio[controls]{

Display:inline-block;

*display:inline:

*zoom:1

}

Mark{

Background:#FF0:

Color:#000

}

</style>

Тут modernizr пытается показать в пристойном виде элементы, поддержка которых может быть недостаточна.

Самый простой и, наверное, востребованный способ использования библиотеки — прямая проверка поддержки используемых технологий. Например, так мы можем удостовериться, поддерживает ли наш браузер элемент canvas:

If (Modernizr. canvas) {

Alert(”canvas API доступен”);

} else {

Alert(”canvas API не доступен”);

}

Но это, правда, очень упрощенный случай, общий способ использования библиотеки примерно такой:

Modernizr. load({

Test: Modernizr. geolocation && Modernizr. canvas, yep : [‘app. js’, ‘app. css’], nope: ‘app-polyfill. js’, both : [ ‘foo. js’, ‘style. css’ ], complete : function () { myApp. init():

}

});

Modernizr. load — это своеобразный загрузчик ресурсов (файлов с javaScript-сценариями и css-таблицами). В секции test перечисляются проверяемые технологии, затем в случае успешной проверки загружается сценарий и css из секции yep, в противном случае — из секции nope.

Ресурсы, перечисленные в секции both, будут загружены в обоих случаях, а функция из complete запустится после того, как все необходимые ресурсы будут загружены.

Нетрудно заметить, что, помимо проверок Modernizr. load, вносит в запуск веб-приложения некоторую, довольно полезную упорядоченность и структурированность. Проверять можно неприличие не только специфичных для Modernizr/HTML5 объектов, но и обычных DOM-элементов, нативных или загруженных другими средствами (например, window. JSON, window. jQuery).

Одной из интересных возможностей является выстраивание очередей — превращение серии предложенных load в полноценный диспетчер загрузки:

Modernizr. load([

{

Complete: function () { if (!window. jQuery) {

}

}

]):

Хотя злоупотреблять подобными конструкциями не следует — тяжеловато.

Вернемся к секции nope — нам предполагается загрузить некий сценарий app-polyfill. js. Честно пытаясь перевести термин polyfill на русский язык, я потерпел неудачу, поэтому давайте обойдемся без перевода. Polyfill — это кроссраузерный код, который добавляет недостающий функционал в старые браузеры. Иногда реализация таких сценариев — весьма нетривиальная задача, но, счастью, эта задача, скорее всего, уже решена за вас. На сайте проекта (http s://git hub. com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) можно выбрать и в случае необходимости подогнать под себя нужный из довольно большого структурированного списка (рис. 5).

Рис. 5. Выбираем нужный Polyfills

Для совсем комфортной работы с «полифилами» (да и вообще с проблемами функциональной совместимости) можно порекомендовать отличный сервис html5please (Http://html5please. com/), который может сам провести проверку и дать рекомендации по «страховке» кода (рис. 6).

Рис. 6. HTML5 Please подсказывает решение проблем

Впрочем, это еще не все. Библиотека, несмотря на свой небольшой размер (она даже в полной комплектации занимает чуть более 15 Кб), довольно удачно спроектирована и имеет удобный механизм расширения — метод Modernizr. addTest(). Применяется он следующим образом:

Modernizr. addTest(‘bar’, function(){

Var foo = document. createElement(‘foo’); return typeof foo. addBar === ‘function’

});

Наверное, пример слишком абстрактен, но основной механизм проиллюстрирован. Все, правда, так просто. Модель разработки modernizr открыта, и все стоящие расширения принимаются в репозиторий (в структуре проекта на GitHub).

В заключение мо жно упомянуть, что modernizr используют Twitter, Google, Microsoft (в пакете ASP. NET MVC 3 Tools Update Modernizr поставляется в комплекте с новыми приложениями ASP. NET MVC) и множество других компаний. Так что нам тоже не грех.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *