Modernizr, это небольшая JavaScript библиотека, которая  добавляет классы к <html> элементу, которые позволяют нацеливаться на специфичную функциональность браузера в ваших таблицах стиля, без написания скриптов.

Modernizr определяет поддерживает ли браузер те или иные функции, свойства из HTML5/CSS3.

При загрузке сайта, Modernizr выполняет скрипт, в результате чего,  добавляет созданные им классы  к <html>. Таким образом:  заменяется <html class=”no-js”> на <html class=”js … borderradius boxshadow textshadow …”>(полный список значительно длиннее). Эти классы вы можете использовать в таблицах стилей для оформления нужных вам элементов.  Кроме этого, Modernizr дает возможность поддержки новых семантических элементов из HTML5 спецификации, при помощи вложенного скрипта схожего с популярным HTML5shiv.

Например:
Вам надо, чтобы у  <div class=”box”> была тень и при этом задать определенный вид для браузеров не поддерживающих  box-shadow.

[php]<div class=”box”>

.boxshadow div.box{ /*стили для поддерживающих тень браузеров */}

.no-boxshadow div.box {/* не поддерживающих */}[/php]

.no-boxshadow и .no-boxshadow создается Modernizr , а не вами.

 

Например: для тега <audio> из HTML5:

[php]
.no-audio #audio {
display: none; /* Прячет аудио опции*/}
.audio #audio button {
/* Оформление кнопок Play и Pause */}

<div id=»audio»>
<audio> <source src=»mySong.ogg» /> </audio>
<button id=»play»>Play</button>
<button id=»pause»>Pause</button>
</div>
[/php]

Что еще важно, данные классы вы используете в CSS , а в HTML верстке вы ничего не добавляете, за вас это делает Modernizr .

В CSS надо поставить пробел между классом созданным модернизером и вашим элементом (нисходящий селектор): .no-textshadow h1.

Классы он создает по такому принципу: если браузер поддерживает данное свойство или тег, то тогда классы выглядят так: <html class=”js … boxshadow … audio …“ >, а если не поддерживает, то добавляется этот же класс, но с приставкой .no- <html class= “… no-boxshadow … no-audio…”>.  starwebdesign.com.ua/blog

Этих классов добавляется целый список, состоящий из большинства популярных свойств HTML5/CSS3. Полный перечень того,что определяет и поддерживает Modernizr выложен на сайте.

Вот так выглядит результат работы Modernizr в двух браузерах (использовался Firebug):

[php]
<!— 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”>
[/php]

[php]
<!— 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»>
[/php]

Какие плюсы для IE дает Modernizr? Modernizr исполняя свой скрипт «заставляет работать» элементы из HTML5 для их оформления в IE. swd.  Это не означает, что IE внезапно начнет поддерживать Audio или Video элементы, это просто значит, что вы сможете использовать <section> вместо <div> и оформлять его при помощи CSS. Как часть Modernizr 1.5, данный скрипт идентичен популярной html5shiv библиотеке.

Modernizr 2 beta

Если у вас нет необходимости в создании всех классов Modernizr для html, вы можете воспользоваться Modernizr 2 beta. В новой версии вы просто отмечаете галочкой свойства, которые вы хотите, чтобы Modernizr поддерживал в браузерах. Затем скачайте или скопируйте полученный скрипт и включите его вместо стандартного <script src=»modernizr-1.6.min.js»></script>. starwebdesign.com.ua/blog

Что Modernizr не делает

Он не добавляет упущенную функциональность браузерам. Вместо этого он определяет их естественную функциональность и предлагает вам решение, при помощи которого вы поддержите необходимый уровень контроля над вашим сайтом.

Вывод

Таким образом, что делает Modernizr? Он упрощает ту часть работы, когда мы пытаемся настроить поддержку HTML5/ CSS3 тем или иным браузером, при создании веб-сайта “по последнему слову техники”. starwebdesign.com.ua/blog