Июл
9
2013

Основы библиотеки modernizr, примеры использования

modernizr3

Modernizr это feature-detection библиотека, определяющая наличие поддержки разных возможностей HTML5\CSS3. Узнайте на примерах, как использовать все преимущества Modernizr, этой богатофункциональной JavaScript библиотеки и начните использовать ее уже в следующем Вашем проекте!

История Modernizr началась еще в 2010, и с тех пор она помогает веб-разработчикам и веб-дизайнерам пользоваться преимуществами HTML5 и CSS3 несмотря на то, что их поддержка браузерами до сих пор очень разнится. Эта библиотека входит в состав популярнейшего фреймворка HTML5 Boilerplate, так что можно с уверенностью говорить, что она используется на довольно значительном количестве сайтов в Сети.

Большинство руководств освещают основные примеры использования Modernizr, просто показывая синтаксис и не объясняя зачем и почему это следует делать. А все от того, что многие веб-разработчики используют эту библиотеку не в полную силу, и не знают о многих ее дополнениях, доступных по умолчанию.

Modernizr обладает следующими основными возможностями, интересными для разработчиков:

  • Обнаружение возможностей: через добавление CSS-класса
  • Обнаружение возможностей: c помощью объектов Javascript
  • Modernizr.load();

Основной задачей Modernizr является определение поддержки возможностей HTML5 и CSS3 текущим браузером пользователя и предоставление этой информации через добавление CSS-классов к HTML элементам, а так же с помощью объектов Javascript .

Обнаружение возможностей: с помощью CSS

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

Например, если открыть страницу использующую Modernizr в одной из последних версий Chrome, то HTML элемент будет выглядеть примерно так:

<html class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations
 csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage
 svg inlinesvg blobbuilder blob bloburls download formdata">

А теперь сравните это с тем, что будет при просмотре страницы через IE7:

<html class="js no-touch postmessage no-history no-multiplebgs no-boxshadow no-opacity
 no-cssanimations no-csscolumns no-cssgradients no-csstransforms no-csstransitions fontface
 localstorage sessionstorage no-svg no-inlinesvg wf-loading no-blobbuilder no-blob
 no-bloburls no-download no-formdata">

Использование внедренных классов

Итак, мы узнали какие возможности поддерживаются, но что же делать с этой информацией?

Мы можем применять различный CSS в зависимости от внедренного класса в HTML элемент:

.opacity .button {
background:#000;
opacity: 0.75;
}
.no-opacity .button {
background: #444;
}

Это отличный прием, и с его помощью можно решать проблемы в оформлении, которые гарантированно возникнут в старых браузерах. Тем не менее не стоит его использовать в качестве основного «способа борьбы со старыми браузерами».

Проблема: проще запутаться

Если каждое CSS-правило будет писаться для отдельной возможности, которая может или поддерживаться или нет, то код становится довольно запутанный:

.button{//базовый стиль}
.boxshadow .button{//определяет box shadow }
.textshadow .button{//определяеттень для текста}
.opacity .button {//определяет прозрачность}
.no-opacity .button {//стиль на случай если прозрачность не поддерживается}

К одному элементу может применяться целая череда стилей, что не очень удобно.

Проблема: зависимость от JavaScript

Кроме того, опираясь на CSS селекторы, которые динамически генерируются Modernizr, вы не обеспечите правильного отображения сайта в случае если у пользователя отключен JS или он по какой-то причине не загрузился.   Несмотря на то, что доля пользователей с отключенным JavaScript довольна мала, существуют и другие случаи, когда JS-код не будет выполнен.

«.no-feature» или «.feature»??

На мой взгляд, наиболее оптимально использовать селекторы для отсутствующей функциональности (например no-opacity) вместо добавления имеющейся функциональности (например opacity). В так случае, если по какой-либо причине Modernizr не загрузится, то в хороших и современных браузерах ничего страшного с вашим сайтом не произойдет.

.box{
                  //Имитация box shadow для старых браузеров
                  border-right: solid 2px #444;
                  border-bottom: solid 2px #444;
}
.boxshadow .box{
                  border:none;
                  box-shadow: 10px 10px 5px #888;
}

В вышеприведенном примере, в случае если Modernizr не загрузится, то класс boxshadow не будет добавлен, и его имитация будет во всех браузерах — и новых и старых.

.box{
box-shadow: 10px 10px 5px #888;
}
.no-boxshadow{
border-right: solid 2px #444;
border-bottom: solid 2px #444;
}

А если использовать такой код, то в случае если Modernizr не загрузится, то посетители с современными браузерами (а их большинство) увидят настоящий boxshadow. В тоже время, браузеры непонимающие boxshadow проигнорируют его.

Используйте резервные варианты

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

#container{
background: #EEEEEE; //Browsers that do not support BG gradients
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
// W3C
}

Много пользователей, много браузеров

В большинстве случаев посетители видят ваш сайт только в одном браузере, так что он должен хорошо выглядеть в любом браузере и не обязательно абсолютно одинаково. Если какие-то CSS свойства не работают в старом браузере – просто смиритесь с этим.

Так например, если IE6-8 не показывает закругленные границы вашего меню навигации, то с этим можно спокойно жить, а не городить ужасы для имитации этих самых круглых уголков.

#nav li{
             Border: solid 1px #333;
             Border-radius: 3px;
}

Когда стоит использовать классы

Существует несколько случаев, когда следует использовать внедряемые классы Modernizr:

1. Если запасной вариант не работает

Например если вы хотите использовать background:#000; opacity: 0.25; то браузеры не поддерживающие прозрачность будут отображать черный фон, в то время как он должен быть серый (#ccc) . Избежать этого можно следующим образом:

#container{background:#fff; opacity: 0.25;}
.no-opacity #container{background:#ccc;}

2. Если изменения незначительные или специфические

Например если вы хотите убрать стрелку выпадающего меню навигации для устройств с сенсорным экраном:

.touch .nav li.dropDown{ background:none; }

Обнаружение возможностей: С помощью JS

При загрузке, библиотека Modernizr создает JavaScript объекты с именами тестируемых возможностей в виде булевых переменных.

Modernizr.geolocation; //True в Chrome, False в IE7
Modernizr.cssgradients; //True в Chrome, False в IE7
Modernizr.fontface; //True в Chrome, False в IE7

Они могут быть использованы прямо в вашем коде:

if (Modernizr.canvas){
                  // Создаем canvas и рисуем
} else {
                  // В противном случае делаем что-нибудь иное
}
if (Modernizr.localstorage){
                  //используем localstorage
} else {
                  //или что-нибудь придумываем
}

Это также может быть полезно например для при проектировании для устройств с сенсорными экранами.

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

if (Modernizr.touch){
                  $('.rolloverCaption').css('display', 'block');
} else {
$('.rolloverCaption').css('display', 'none').hover(function(){$(this).fadeIn(300);
$(this)fadeOut(300);})};

modernizr-hover

Пользователи настольных компьютеров будут видеть hover-эффект при наведении курсора на элементы.
Для сенсорных устройств:

img-bio-touch

Эти пользователи будут видеть сразу полную версию.
В зависимости от доступности той или иной функции, такой как localStorage, вам может потребоваться предусмотреть совершенно разные решения. В таком случае например было бы удобно подгружать необходимые дополнительные JS библиотеки при отсутствии поддержки localStorage. Это легко сделать с помощью Modernizr.load().

Modernizr.load() также известный как yepnope.js

yepnope.js это асинхронный загрузчик с условием, специально разработанный и внедренный в Modernizr. Это значит, что yepnope.js будет загружать JavaScript и CSS в фоновом режиме, в зависимости от переданного ему условия или набора условий, таких как поддержка браузером сенсорного экрана или canvas. Синтаксис довольно интуитивен, и мы можете использовать Modernizr.load() или yepnope.js для вызова функции. Следующий фрагменты эквивалентны:

Modernizr.load({
                  Test          :               Modernizr.localstorage,
                  Yep           :               'localstorage.js',
                  Nope          :               'localstorage-alternative.js'
});

yepnope({
                  Test          :               Modernizr.localstorage,
                  Yep           :               'localstorage.js',
                  Nope          :               'localstorage-alternative.js'
});

Если «test» возвращает true (т.е. браузер поддерживает localstorage), тогда будет загружен localstorage.js, в противном случае будет загружен localstorage-alternative.js.  «Yep» и «Nope» опциональны, так что вы можете использовать всего один из них:

Modernizr.load({
                  Test          :               Modernizr.touch,
                  Yep           :               ['js/touch.js', 'css/touch.css']
})

Modernizr.load/Yepnope.js это быстрый и легковесный загрузчик скриптов, который доступен сразу после подключения Modernizr.

ДемоИсходники

Похожие записи

Немного об авторе: Сергей Белянин

Основной автор этого блога. Еще совсем недавно студент, а сегодня уже Microsoft Certifed Professional, с неукротимым желанием сделать жизнь людей проще, автоматизировав скучную рутинную работу :)

  • http://svoi-sait.sitecity.ru azu9

    Мне нужно определить сенсорные устройства. Будет ли работать Загрузчик Modernizr

    Modernizr.load({
    test : Modernizr.touch,
    Yep : [‘css/touchStyles.css’] });

    Если, документ HTML4 ?