Получить бесплатную консультацию
Оставьте свои контакты, и с Вами
свяжутся наши специалисты
Заявка успешно отправлена!
С вами свяжется наш консультант :)
Произошла какая-то ошибка, пожалуйста, обновите страницу и попробуйте снова.
HTML

Создаём продвинутые адаптивные сайты вместе с enquire.js

Все мы привыкли к тому, что CSS media queries позволяют нам управлять именно таблицами стилей, но enquire.js предлагает нам «запрячь» media queries «в упряжку» джаваскрипта, что несомненно даёт разработчикам возможность создавать более продвинутые адаптивные сайты.

О чём вообще речь?

Enquire.js — это ‘легкая’, независящая от каких-либо фреймворков, javascript библиотека для работы с CSS media queries.

  • Позволяет легко привязывать js-функции обратного вызова (коллбэки) на изменение media queries (matching и unmatching).
  • Чистый, интуитивный API
  • Очень лёгкая библиотека, всего 0.8Кб в сжатом виде

Какие у данной библиотеки есть зависимости?

Может jquery? Нет! Абсолютно никаких!

Скачать, как обычно, можно

Девелоперскую версию — не сжатую

Продакшн версию — сжатую

Исходники проекта, естественно, доступны на GitHub

Проще всего установить данную библиотеку (как и другие фронт-енд инструменты) используя bower

Быстрый старт

Основной метод, с которым вам предстоит иметь дело — это register. Синтаксис совсем несложен:

Этого должно быть достаточно, чтобы приступить к работе, однако для полного понимания, рекомендуем читать дальше.

Как известно, проще всего учиться на примерах. Поэтому давайте рассмотрим один из них в деталях и попытаемся понять, как нам может помочь enquire.js. При этом попытаемся сконцентрироваться даже не столько на деталях, сколько на самой концепции адаптивного дизайна.

Сценарий

Мы разрабатываем веб сайт. Для маленьких мониторов мы хотим видеть один столбец контента, просто основной текст. Для больших мониторов мы хотим отображать также второй столбец, содержащий дополнительный контент. При этом достаточно большая часть потенциальных пользователей нашего сайта будут просматривать его с мобильных девайсов с медленным интернетом, а это значит что станицы должны весить как можно меньше.

Обычно мы бы стали использовать CSS media queries для того, чтобы показывать и прятать сайдбар (столбец со вспомогательной информацией). Но если скорость работы сайта — одно из основных требований, тогда мы не должны подгружать контент, который не нужен в данный момент! В таком случае, единственный возможный вариант решения данной задачи — это использовать решение, основанное на JavaScript. В прошлом, такой подход был бы ненадёжным и уродливым. Хорошо, что времена изменились…

Match

enquire.js позволяет решить данную проблему тривиально. Давайте показывать сайдбар на дисплеях с минимальной шириной 45em. Проще всего сделать это так:

Как видите, всё очень просто. Проблема практически решена, но не совсем.

Unmatch

Мы также должны обрабатывать случай, когда query переходит из состояния matched в состояние unmatched. Для этого предусмотрен соответствующий метод (от одной функции переходим к 2м методам):

Во многих случаях данное решение вполне адекватное и достаточное. Однако мы пойдём дальше, ведь мы можем сделать это и лучше.

Setup

В примере выше есть одна проблема, которую мы не рассмотрели. Что произойдёт если query совпадёт (gets matched) во второй раз? В этом случае делать ещё один аякс запрос совершенно бессмысленно. Мы могли бы записать в функцию обратного вызова match информацию о том, что контент уже был загружен, но вместо этого давайте воспользуемся специальным методом setup.

По умолчанию, setup вызывается автоматически, как только query будет зарегистрирован. А это значит, что наш аякс запрос будет вызван даже для маленьких дисплеев — где он никогда не будет нужен, т.к. никогда не будет показан. Проблема решается очень просто: deferSetup.

Deferring Setup

И с этим простым дополнением, мы теперь делаем аякс запрос только один раз, только при первом совпадении(match) media query.

ПОГРУЖАЕМСЯ ГЛУБЖЕ

Multiple Handlers

Поскольку сложность вашего сайта постоянно возрастает, хранение всей логики в одном обработчике может стать слишком громоздким подходом. Enquire позволяет вам регистрировать несколько обработчиков для одного media query, так что вы можете разделить функционал на отдельные логические части. Для этого, в качестве второго параметра метода register, вы можете передавать массив обработчиков.

Multiple Queries

Часто вам могут понадобиться больше чем один media query, например два:

Когда вы применяете подход «mobile-first» вы обычно сталкиваетесь с определенными проблемами, а именно: с неспособностью устаревших браузеров, таких как ie8, поддерживать технологию CSS3 media queries. Но enquire и здесь позаботился о нас.

register может принимать (опционально) третий параметр, shouldDegrade. Когда он равен true (по умолчанию — false), он сообщает enquire.js: если браузер не поддерживает CSS3 media queries, тогда всегда считать данный query совпавшим (match).

Т.к. это влияет только на устаревшие браузеры, современные браузеры будут соблюдать media query и вести себя как ожидается.

Поддержка браузерами

enquire основан на matchMedia API. Он использует matchMedia и matchMedia.addListener. К сожалению matchMedia API поддерживается не во всех браузерах. К счастью, есть polyfill’ы (скрипты, частично эмулирующие спецификации HTML5 или CSS3), которые обеспечивают разные уровни поддержки. Какой polyfill использовать зависит от того, какой уровень поддержки вам нужен.

Базовая поддержка

Вы можете использовать matchMedia polyfill (matchMedia и matchMedia.addListener) от Пола Айриша и Скотта Джелла (Paul Irish/Scott Jehl), если вы хотите поддержкивать браузеры, которые понимают CSS3 media queries, но не поддерживают matchMedia javascript API (например ie9 и Opera 12.0 ). Используйте его с enquire’овским флагом shouldDegrade, чтобы обойти недостатки таких браузеров.

Более широкая поддержка

Если вы хотите обеспечить полную поддержку неспособным браузерам, вы можете использовать media-match polyfill от Дэвида Кнайтса(David Knight’s). C ним вам не нужно использовать флаг shouldDegrade, всё будет работать отлично, как вы и ожидаете в большинстве браузеров. Данный polyfill хорошо протестирован с enquire’ом и работает на всех браузерах, вплоть до IE6.

Если вы используете Modernizr (вам бы стоило!) то здесь всё сводится к асинхронному вызову вашего polyfill:

Оставь комментарий!

10 thoughts on “Создаём продвинутые адаптивные сайты вместе с enquire.js

  1. kovaldn:

    Если есть какие-либо вопросы — пишите. Если нужно разъясняющее видео — оставляйте заявки :) Тема очень глубокая.

    1. kovaldn:

      Вот важный пример применения этой штуки, который я сам использую:

      $(function() {
      // cache body for speed
      var $body = $(«body»);
      // DRY up handler creation
      function handlerFactory(className) {
      return {
      match : function() {
      $body.addClass(className);
      },
      unmatch : function() {
      $body.removeClass(className);
      }
      };
      }
      // hook up our «media queries»
      enquire
      .register(«screen and (max-width : 320px)», handlerFactory(«lt-320»))
      .register(«screen and (max-width : 640px)», handlerFactory(«lt-640»));
      });

  2. disqus_B0HvBu3C9W:

    Даешь разъясняющее видео))

  3. Sarhan:

    Спс, познавательно!

  4. Александр Кувшинников:

    Loftblog.ru — просто находка! Смотрим, учимся. Пока все отлично. Полет нормлаьный!

  5. Alexandr Kuvshinnikov:

    Все понятно. Но возникает такой вопрос. Есть страница сайта, где располагаются аудио-треки — страница с голосованием с возможностью прослушивания песни исполнителя. Разметка HTML5, плеер соответствующий. Дизайн — адаптивный. Как сделать так, чтобы ajax’ом подгружать для десктопов целую песню, а для мобильной аудитории — обрезанную? Было бы проще, если подгрузка осуществлялась лишь в одном случае.

    1. NickyMeloman:

      Нужно определять мобильные устройства (писать условия) и под них уже писать соответствующую логику.

      1. Alexandr Kuvshinnikov:

        Мне кажется, что можно реализовать через медиазапросы, как в примере с сайдбаром. Как считаете?

  6. Максим:

    вот ещё проще : Modernizr.mq(‘only screen and (max-width: 768px)’) // true

Добавить комментарий