Как использовать Modernizr

Инструмент, который призван сделать жизнь прогрессивных веб-дизайнеров немного легче, это Modernizr.

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

Обзор Modernizr

Несмотря на то, что возможности CSS3 используются веб-дизайнерами все больше и больше, поддержка этих возможностей браузерами значительно отстает.

В последнее время я использую Modernizr практически постоянно для того, чтобы выделить те браузеры, которые не поддерживают специфические свойства стандарта CSS3.

Как работает Modernizr

Для того, чтобы установить Modernizr, сначала скачайте его с этой страницы - http://www.modernizr.com/. Затем внутри тега

head

html-страницы подключите распакованный из архива файл

1
modernizr-1.0.min.js

<script src="js/modernizr-1.0.min.js"></script>

Вторым шагом будет подключение класса

no-js

для корневого элемента

1
html

<html class="no-js">

Для чего необходимо подключать класс

no-js

к элементу

1
html

Потому что элемент

html

с классом

1
no-js

будет состоянием страницы по-умолчанию. Если JavaScript (

1
js

) на странице отключен, то скрипт Modernizr также не будет работать (совместно со всеми остальными функциями страницы, завязанными на этом языке), поэтому было бы хорошо, если у нас будет возможность отката (fallback) для этого случая.

Прим. переводчика: попробую от себя объяснить в двух словах, но иначе (если вдруг непонятно) что хотела сказать прекрасная девушка, автор статьи. Если на сайте отключена поддержка JavaScript, то класс
1
no-js
для элемента html - это та “зацепка”, на которую можно повесить все CSS-fallback’и для этого случая.

Если же поддержка JavaScript в браузере включена, то произойдет динамическая подмена класса

no-js

для элемента html на целую группу других классов. В результате исходный код страницы может выглядеть примерно так:

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

Впечатляет, не правда ли? Но что означают все эти классы? Давайте разберемся.

В данном случае, страница была открыта в браузере Firefox 3.5. Этот браузер (к сожалению) не поддерживает множественные фоны на CSS, CSS-градиенты и CSS-трансформации.

Скрипт Modernizr умеет автоматически определять возможности браузера, в котором открыта текущая веб-страница. Для каждого из CSS-свойств в скрипте Modernizr имеются свои собственные классы для их обозначения.

Например, множественные фоны на CSS “обозначены” как

1	multipebgs

, CSS-градиенты как

1
cssgradients

, CSS-трансформации как

1
csstransforms

и так далее.

Когда Modernizr определит, какие CSS-свойства данный браузер поддерживает, а какие нет, он создаст своеобразный отчет - список классов, по которому можно точно узнать, что браузер “умеет”, а что - нет.

Если браузер поддерживает CSS-свойство трансформации, то на элемент html скрипт Modernizr “подцепит” класс

1	csstransforms

. А если браузер не поддерживает это свойство, то Modernizr добавит для имени класса

1
csstransforms

префикс

1
no-

и также “повесит” этот класс на элемент

1
html

, но в виде

1
no-csstransforms

. И так далее …

Пример такого списка-отчета и был показан выше.

Что мне даст эта (ценная) информация?

Логичный вопрос - “а что мы можем делать с этой информацией?”. Хорошо, давайте рассмотрим простой пример.

Множественные фоны на CSS

Фон вашего сайта тщательным образом отстроен и вы используете множественные фоны для того, чтобы сделать его более простым и быстрым с помощью CSS-кода.

Ваш CSS выглядит следующим образом:

#nice {
  background: url(background-one.png) top left repeat-x,
  url(background-two.png) bottom left repeat-x;
}

И браузер генерирует этот прекрасный (ведь не даром же идентификатор имеет имя

nice

) фон так:

Множественные фоны

При использовании библиотеки Modernizr ваш код CSS должен быть преобразован в такой вид:

#nice {
  background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
  background: url(background-one.png) top left repeat-x,
  url(background-two.png) bottom left repeat-x;
}

И вот что увидят посетители сайта в зависимости от того, каким браузером (понимает он множественный фон или нет) они пользуются:

Множественный фон с Modernizr в Safari

Множественный фон с Modernizr в Opera

Это очень простой пример использования скрипта Modernizr, но он должен послужит образцом того, что можно сделать с помощью данной библиотеки.

HTML5

Библиотека Modernizr также позволяет использовать новые элементы, доступные в HTML5 -

header

1
footer

1
section

1
hgroup

1
video

и так далее и стилизовать их.

Однако, это не означает, что все эти элементы можно использовать также в браузере IE. Но вы можете стилизовать эти элементы и тогда IE “поймет” их и не сможет игнорировать.

Прим. переводчика: загадочная фраза, которая лично мне ни о чем не говорит. Требует дальнейшего изучения.

JavaScript

Вы также можете анализировать в вашем собственном JavaScript возможности, которые поддерживает Modernizr, используя пример следующего синтаксиса:

if (Modernizr.geolocation) {
  ...
}

Заключение

Надеюсь, мне удалось объяснить, для чего нужен Modernizr и насколько он полезен в повседневной работе. Так как мы не можем полностью полагаться на тот факт, что браузеры поддерживают все свойства, которые мы хотим использовать, то библиотека Modernizr является лучшим средством для того, чтобы объединить два мира - один, где все возможно, и другой, где все возможно лишь частично.

Оригинал статьи - How to use Modernizr

Как использовать Modernizr

December 09, 2013