Инструмент, который призван сделать жизнь прогрессивных веб-дизайнеров немного легче, это Modernizr.
Короткий мануал, задача которого показать, каким образом можно применять этот полезный скрипт с максимальным эффектом для своих рабочих проектов.
Обзор Modernizr
Несмотря на то, что возможности CSS3 используются веб-дизайнерами все больше и больше, поддержка этих возможностей браузерами значительно отстает.
В последнее время я использую Modernizr практически постоянно для того, чтобы выделить те браузеры, которые не поддерживают специфические свойства стандарта CSS3.
Как работает Modernizr
Для того, чтобы установить Modernizr, сначала скачайте его с этой страницы - http://www.modernizr.com/. Затем внутри тега
html-страницы подключите распакованный из архива файл 1
head
:1
modernizr-1.0.min.js
Вторым шагом будет подключение класса
для корневого элемента 1
no-js
:1
html
Для чего необходимо подключать класс
к элементу 1
no-js
?1
html
Потому что элемент
с классом 1
html
будет состоянием страницы по-умолчанию. Если JavaScript (1
no-js
) на странице отключен, то скрипт Modernizr также не будет работать (совместно со всеми остальными функциями страницы, завязанными на этом языке), поэтому было бы хорошо, если у нас будет возможность отката (fallback) для этого случая.1
js
Прим. переводчика: попробую от себя объяснить в двух словах, но иначе (если вдруг непонятно) что хотела сказать прекрасная девушка, автор статьи. Если на сайте отключена поддержка JavaScript, то класс
для элемента html - это та “зацепка”, на которую можно повесить все CSS-fallback’и для этого случая.
1 no-js
Если же поддержка JavaScript в браузере включена, то произойдет динамическая подмена класса
для элемента html на целую группу других классов. В результате исходный код страницы может выглядеть примерно так:1
no-js
Впечатляет, не правда ли? Но что означают все эти классы? Давайте разберемся.
В данном случае, страница была открыта в браузере Firefox 3.5. Этот браузер (к сожалению) не поддерживает множественные фоны на CSS, CSS-градиенты и CSS-трансформации.
Скрипт Modernizr умеет автоматически определять возможности браузера, в котором открыта текущая веб-страница. Для каждого из CSS-свойств в скрипте Modernizr имеются свои собственные классы для их обозначения.
Например, множественные фоны на CSS “обозначены” как
, CSS-градиенты как 1
multipebgs
, CSS-трансформации как 1
cssgradients
и так далее.1
csstransforms
Когда Modernizr определит, какие CSS-свойства данный браузер поддерживает, а какие нет, он создаст своеобразный отчет - список классов, по которому можно точно узнать, что браузер “умеет”, а что - нет.
Если браузер поддерживает CSS-свойство трансформации, то на элемент html скрипт Modernizr “подцепит” класс
. А если браузер не поддерживает это свойство, то Modernizr добавит для имени класса 1
csstransforms
префикс 1
csstransforms
и также “повесит” этот класс на элемент 1
no-
, но в виде 1
html
. И так далее …1
no-csstransforms
Пример такого списка-отчета и был показан выше.
Что мне даст эта (ценная) информация?
Логичный вопрос - “а что мы можем делать с этой информацией?”. Хорошо, давайте рассмотрим простой пример.
Множественные фоны на CSS
Фон вашего сайта тщательным образом отстроен и вы используете множественные фоны для того, чтобы сделать его более простым и быстрым с помощью CSS-кода.
Ваш CSS выглядит следующим образом:
И браузер генерирует этот прекрасный (ведь не даром же идентификатор имеет имя
) фон так:1
nice
При использовании библиотеки Modernizr ваш код CSS должен быть преобразован в такой вид:
И вот что увидят посетители сайта в зависимости от того, каким браузером (понимает он множественный фон или нет) они пользуются:
Это очень простой пример использования скрипта Modernizr, но он должен послужит образцом того, что можно сделать с помощью данной библиотеки.
HTML5
Библиотека Modernizr также позволяет использовать новые элементы, доступные в HTML5 -
, 1
header
, 1
footer
, 1
section
, 1
hgroup
и так далее и стилизовать их.1
video
Однако, это не означает, что все эти элементы можно использовать также в браузере IE. Но вы можете стилизовать эти элементы и тогда IE “поймет” их и не сможет игнорировать.
Прим. переводчика: загадочная фраза, которая лично мне ни о чем не говорит. Требует дальнейшего изучения.
JavaScript
Вы также можете анализировать в вашем собственном JavaScript возможности, которые поддерживает Modernizr, используя пример следующего синтаксиса:
Заключение
Надеюсь, мне удалось объяснить, для чего нужен Modernizr и насколько он полезен в повседневной работе. Так как мы не можем полностью полагаться на тот факт, что браузеры поддерживают все свойства, которые мы хотим использовать, то библиотека Modernizr является лучшим средством для того, чтобы объединить два мира - один, где все возможно, и другой, где все возможно лишь частично.
Оригинал статьи - How to use Modernizr