Очевидно, что нам необходим инструмент, решающий проблемы совместимости браузеров и новых технологий. И такой инструмент уже есть!
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) и множество других компаний. Так что нам тоже не грех.
Добавить комментарий