Пользователь
0,0
рейтинг
23 мая 2012 в 04:12

Разработка → Modernizr: практическое применение tutorial recovery mode

Modernizr — это JavaScript-библиотека, которая узнаёт, что из HTML5 и CSS3 умеет браузер пользователя. Определяя возможности браузера, разработчик может сделать откат некоторых функций для старых версий браузеров. Создатели Modernizr называют такую проверку feature detection, и это гораздо эффективнее, чем просто определить браузер, его версию и ОС.

Я был премного удивлён факту отсутствия развёрнутой статьи об этой JS-библиотеке (анонс не в счёт). Статья составлена из перевода официальной документации проекта, переводов нескольких статей и собственных дополнений.

Первый шаг


Для начала нужно получить свежую версию библиотеки с её официального сайта: Modernizr Download Builder.
Укажи галочками те технологии, тесты которых собираешься проводить, затем создай свою персональную версию библиотеки кнопкой «Generate». Если проставить все галочки, получившегося кода хватит на пару экранов небольшого ноутбука – всего 15 КБ.
Затем просто подключи его к своей странице и проверь, как оно. Если всё работает, у элемента HTML должны появиться многочисленные классы:

<html class="js flexbox flexbox-legacy canvas canvastext no-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 csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

Как можно легко догадаться: что добавлял галочками в библиотеку, те тесты и будут выполнены при подключении Modernizr, а потом добавлены классы в зависимости от браузера. Но не забудьте дать элементу HTML класс no-js, чтобы опираться на него, когда JS у клиента не включен.
Уже на этом этапе можно создавать очень эффективные таблицы стилей, например:

.multiplebgs selector {
	background-image: url('image.png') center 10px no-repeat, url('background.png');
}
.no-multiplebgs selector {
	background-image: url('image.png') center 10px no-repeat lightgray;
}

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

Тесты


Проверка на присутствие той или иной технологии в браузере – тест.
На тесты, которые проводит Modernizr, можно цеплять события. Тест пройден — зацепка yep, не пройден — nope. Очень мило.

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

yep – подключаю сценарий, использующий геолокационные возможности браузера.
nope – пытаюсь обойтись без них в geo-polyfill.js.

Говорят, что вот так тоже можно делать:

if (Modernizr.geolocation) {
// функции
}

А почему бы и нет?

Вот пример посложнее:

// Дай функции Modernizr.load строку, объект или массив строк и объектов
Modernizr.load([
  // Поли-заполнители для презентации
  {
    // Список того, что нам нужно
    test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
    // Modernizr.load загружает css и javascript
    nope : ['presentational-polyfill.js', 'presentational.css']
  },
  // Действенные поли-заполнители
  {
    // Авось прокатит
    test : Modernizr.websockets && window.JSON,
    // socket-io.js и json2.js
    nope : 'functional-polyfills.js',
    // А ещё можно дать массивы ресурсов для загрузки
    both : [ 'app.js', 'extra.js' ],
    complete : function () {
      // Запускаю это после того, как всё в этой группе было скачано
      // и запущено, вдобавок ко всем предыдущим группам
      myApp.init();
    }
  },
  // Запускаю анализ после всего, что нужно сделать.
  'post-analytics.js'
]);

Не так уж и сложно, верно?
и не придирайтесь к слову “поли-заполнитель” – MicroSoft отлично его перевели.

Одна из крутых возможностей Modernizr.load – возможность выстроить подключаемые сценарии в очередь. Многим это может ни о чём не говорить, но пользователи HTML5 Boilerplate скорее всего знакомы с запасным jQuery из Google CDN. Выглядит как-то так:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>')</script>

Работает так: сначала пытается загрузить jQuery в сценарии, а затем – сразу же после, проверяя, что объект jQuery доступен. Если нет, то пытается загрузить локальную копию jQuery. Это не так-то уж и просто, и Modernizr.load спешит на помощь. Следуй вот такой логике, и он возьмёт в свои руки порядок подключения сценариев:

Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.7.1.min.js');
      }
    }
  },
  {
    // Это будет ждать откат для загрузки и запуска, если это необходимо.
    load: 'needs-jQuery.js'
  }
]);

Замечание: используй этот метод лишь для откатов, потому как последовательная загрузка сценариев вместо параллельной может сильно ударить по быстродействию.

Расширяемость


Очень кстати разработчики Modernizr дали возможность расширять библиотеку самостоятельно с помощью Modernizr.addTest.
Простейший пример:

// Тест на поддержку элемента <track>
Modernizr.addTest('track', function(){
  var video = document.createElement('video');
  return typeof video.addTextTrack === 'function'
});

В документации есть раздел «Extensibility», посвящённый расширяемости, где всё подробно описано. А в проекте на GitHub'е есть папка, куда складывают все годные пользовательские расширения: /feature-detects/.

Поддержка браузеров


IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. На мобильных устройствах – Mobile Safari на iOS, Webkit на Android's, Opera Mobile, Firefox Mobile и есть большие надежды на поддержку Blackberry 6+.

Заключение


Отличное подспорье для проектов с плюс-минус широкой аудиторией, когда хорошая поддержка важнее времени загрузки и исполнения страницы. Впрочем, если знать меру – можно и на простые одностраничные сайты его вешать, просто для удобства или даже за делом.
Modernizr используют в довольно крупных компаниях: twitter, Google, Microsoft.

Ссылки


Grawl @Grawl
карма
–3,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (27)

  • –3
    Хорошая статья.
  • –5
    Первая из методических рекомендаций Крылова гласит, что слово тем удобнее в речи, чем оно короче по числу слогов. Подозреваю поэтому, что «поли-заполнитель» (6 слогов) вместо «полифилл» (3 слога) отнюдь не приживётся, ибо вдвое длиннее и тем неудобнее.
    • НЛО прилетело и опубликовало эту надпись здесь
      • –12
        В слове «ку» один слог, но заменить все остальные слова оно способно только у пацаков — а в португальской речи оно имеет значение «жопа».

        Слово «пост» в русском языке слишком омонимично, поскольку в зависимости от контекста может означать либо занимаемую должность (скажем, «высокий пост»), либо вероисповедное воздержание (например, «Великий Пост»), либо место наблюдения (допустим, «пост ГАИ»), так что куда уж ещё более перегружать его дополнительными значениями. Вот почему я придумал особый термин «блогозапись».

        У слова «полифилл» никакого неудобного другого значения или созвучия нету.
        • +13
          У пацаков «жопа» — это «кю»
        • НЛО прилетело и опубликовало эту надпись здесь
          • +3
            индекс?
            • НЛО прилетело и опубликовало эту надпись здесь
              • +1
                По сути индекс в БД и почтовый индекс очень близки, не думаю что тут можно говорить о омонимичности.
            • 0
              Для sql-баз индекс != ключ.
        • +1
          Как определить чрезмерную омонимичность слова? Сколько значений может иметь слово, не будучи при этом перегружено?
        • 0
          Ну можно еще «статья».
        • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          а мне кажется, что одно слово в разных областях вполне может означать разные вещи и от этого оно не перегружается. «Пост в Интернете», «Пост ГАИ», «Великий Пост». Если из контекста не понятно о каком «посте» идет речь, люди обычно добавляют пояснение.
        • 0
          слово полифил же от коммерческого названия какогойто строительной мастики продающейся в штатах. Получается по смыслу надо переводить либо как «костыль» :) либо как «замазка» :)
          • 0
            Верно подмечено! Как были костылями, так и остаются.
    • +1
      Хорошилище идет по гульбищу на позорище в мокроступах?
  • +1
    Кстати, Modernizr по умолчанию включён в проекты на ASP.NET MVC.
    • +1
      Только начиная с 3-й версии MVC
  • +1
    очень удобная библиотека, однажды заюзал ее в составе хтмл5 бойлерплейта и сразу проникся. для мобильных сайтов всякие геолокации и поддержку css-фич очень удобно проверять.
  • +1
    Да статья хороша, новинки хабра дают плодотворные плоды (ожидаем всплеск качественных статей).
    Продолжайте!
    • +1
      С радостью продолжу.
  • 0
    Мода, что ли, пошла такая — обращаться к читателю на «ты»…
    • +1
      Считаю, что это верная мода. «Вы» в русском слишком омонимично :P
      • 0
        А зачем обязательно обращаться к читателю персонально? Можно и без «вы», и без «ты». Хотя иногда это оправданно, но не во всём тексте, а в предисловии там или послесловии, в духе «Дорогой читатель! Коллектив авторов надеется, что эта книга будет тебе полезна» и т.д.
    • 0
      Я сначала старался без обращений писать, но навыка не хватило. Решил так.
  • +1
    В ряде случаев это вопрос неуклюжести текста. Если текст имеет характер мануала или туториала (а топик его имеет), то без императивов будет читаться довольно коряво.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.