Modernizr — «швейцарский армейский нож» разработчика клиентских приложений
Способность участников веб-сообщества разбираться со многими разнообразными проблемами кросс-браузерной совместимости и создавать решения для простых смертных вроде меня никогда не перестанет удивлять и восхищать. Modernizr — это JavaScript-библиотека с открытым исходным кодом, которая позволяет тестировать браузеры на предмет поддерживаемых ими функций. Фаук Атеш (Fauk Ate§) написал ее первую версию, а в настоящее время в проекте Modernizr также участвуют Алекс Секстон (Alex Sexton) и невероятно талантливый Пол Айриш (Paul Irish), выступающий в качестве ведущего разработчика. Modernizr является любимым инструментом многих известных компаний — Twitter, Microsoft и Google. Я говорю это не просто для того, чтобы превознести команду разработчиков Modernizr (хотя они, вне всякого сомнения, заслуживают этого), а больше для того, чтобы показать, что этот инструмент является современным, замечательным JavaScript-решением. Одним словом, это инструмент, которым вам стоит хорошо владеть.
Так что же фактически делает Modernizr? Каким образом этот инструмент позволяет нам устранять пробелы в функциональности устаревших браузеров и прогрессивно улучшать обеспечиваемое пользовательское взаимодействие в современных браузерах и как мы сможем заставить его делать то, что нам нужно? Читайте дальше и все узнаете.
Работа Modernizr по умолчанию немного отличается от процедуры добавления HTML5-прослойки Реми Шарпа (если выбор был сделан в пользу этого решения) с целью включить поддержку структурных HTML5-элементов, например <aside> и <section>, в не поддерживающие HTML5 браузеры вроде Internet Explorer версии 8 и ниже. Инструмент Modernizr тестирует браузеры на предмет распознаваемых ими функций. В результате он сможет узнать, поддерживает ли соответствующий браузер различные HTML5 и CSS3-свойства. Затем он обеспечит средства, позволяющие предпринимать разные действия в зависимости от сведений, полученных в результате тестирования. Реализация всего остального возлагается на нас. Итак, добавим Modernizr в наши страницы и приступим к работе.
Сначала скачайте Modernizr (по адресу http://www.modernizr.com).
КАКУЮ ВЕРСИЮ MODERNIZR ИСПОЛЬЗОВАТЬ — ВЕРСИЮ ДЛЯ РАЗРАБОТКИ ИЛИ ПРОИЗВОДСТВЕННУЮ?
Если вам интересно, как действует этот инструмент, то скачивайте версию Modernizr для разработки (рисунок 9.6), поскольку в ней документирована каждая функция/тест. А если вы предпочтете производственную версию, то сможете выбирать только тесты, актуальные для определенного сайта или веб-приложения, которое вы создаете, сохраняя при этом свои файлы довольно компактными.
Страница загрузки Modernizr.
Далее поместите скачанный файл в подходящую папку (как и раньше, я использовал для этой цели корневой каталог js). Затем укажите ссылку на файл в теге <head> своей страницы:
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initialscale=1.0, maximum-scale=1"
/>
<title>And the winner isn’t…</title>
<link href="css/main. css" rel="stylesheet" />
<script src="js/modernizr. js"></script>
</head>
Если вы, добавив Modernizr, взглянете на исходный код страницы в Firebug или чем-то похожем, то увидите множество разных классов, добавленных в тег <html>. Вот пример из Firefox 9.01:
<html class=" js flexbox geolocation postmessage indexeddb history websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localStorage sessionstorage applicationcache" lang="en">
Этот фрагмент очень информативен. В нем последовательно приводятся функции, на предмет которых был проведен тест и которые браузер поддерживает или не поддерживает (если функция не поддерживается, то название снабжается префиксом no-). Все это позволит нам сделать две важные вещи — функция за функцией устранить проблемы со стилизацией в наших CSS-файлах, а также условно загружать дополнительные CSS и JavaScript-файлы только при необходимости.
Добавить комментарий