Modernizr и HTML5/CSS3 - что и как он делает
Modernizr, это небольшая javascript библиотека, которая определяет поддерживает ли браузер те или иные функции, свойства из HTML5/CSS3 и добавляет классы к <html> элементу на странице, которые позволяют использовать специфичную функциональность браузера в ваших таблицах стилей, без написания дополнительных скриптов.
При загрузке страницы в браузер, Modernizr добавляет созданные им классы к <html> элементам. Это значит, что заменяется <html class=”no-js”> на <html class=”js … borderradius boxshadow textshadow …”>(полный список значительно длиннее). Эти классы вы можете использовать в таблицах стилей для оформления нужных вам элементов. Так-же Modernizr дает возможность поддержки новых семантических элементов из HTML5 спецификации, при помощи вложенного скрипта, похожего на популярный HTML5shiv.
Например:
Надо, чтобы у <div class=”header”> была тень и при этом задать определенный вид для браузеров не поддерживающих box-shadow.
.boxshadow div.header{ /*стили для поддерживающих тень браузеров */}
.no-boxshadow div.header {/* не поддерживающих */}
.no-boxshadow и .no-boxshadow создает сам скрипт Modernizr , а не вы.
Например: для тега <audio> из HTML5:
.no-audio #audio {
display: none; /* Прячет аудио опции*/}
.audio #audio button {
/* Оформление кнопок Play и Pause */}
<div id="audio">
<audio> <source src="myMusic.mp3" /> </audio>
<button id="play">Play</button>
<button id="pause">Pause</button>
</div>
Важно, что данные классы вы используете в CSS , а в HTML верстку вы ничего не добавляете, за вас это делает Modernizr.
Классы скрипт создает по такому принципу: если браузер поддерживает данное свойство или тег, то тогда классы выглядят так:
<html class=”js … boxshadow … audio …“ >,
а если не поддерживает, то добавляется этот же класс, но с приставкой .no-
<html class= “… no-boxshadow … no-audio…”>.
Этих классов добавляется целый список, состоящий из большинства популярных свойств HTML5/CSS3. Полный перечень того,что определяет и поддерживает Modernizr выложен на сайте.
Вот так выглядит результат работы Modernizr в двух браузерах (использовался Firebug):
<!-- Chrome -->
<html class=”js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface video audio localstorage sessionstorage starwebdesigncomua webworkers starwebdesigncomua applicationcache svg inlinesvg smil svgclippaths”>
<!-- IE8-->
<html class=” js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths">
Какие плюсы для IE дает Modernizr?
Modernizr исполняя свой скрипт «заставляет работать» элементы из HTML5 в IE.
Это не означает, что IE внезапно начнет поддерживать Audio или Video элементы, это просто значит, что вы сможете использовать <section> вместо <div>, а так же другие элементы, такие как <header>, <dialog> и оформлять их при помощи CSS. Как часть Modernizr 1.5, данный скрипт идентичен популярной html5shim библиотеке.
Modernizr 2 beta
Если у вас нет необходимости в создании всех классов Modernizr для html, вы можете воспользоваться Modernizr 2 beta. В новой версии вы просто отмечаете галочкой свойства, которые вы хотите, чтобы Modernizr поддерживал в браузерах. Затем скачайте или скопируйте полученный скрипт и включите его вместо стандартного <script src=»modernizr-1.6.min.js»></script>.
Что Modernizr не делает
Он не добавляет функциональность браузерам, он определяет их естественную функциональность и предлагает вам решение, при помощи которого вы поддержите необходимый уровень контроля над вашим сайтом.
Вывод
Таким образом Modernizr упрощает часть работы, когда мы пытаемся настроить поддержку HTML5/ CSS3 тем или иным браузером, при создании веб-сайта “по последнему слову техники”.