Enquire.js — используем css медиа-запросы в JS

Приветствую всех в 2017 году! Как быстро летит время, не успел оглянуться, а уже 2017 год. 2017 — можете себе представить? Я всегда оборачиваюсь назад и смотрю какой путь я прошел и чего добился. В 2016 году я получил много теории. Вот, думаю, 2017 год будет чисто практическим. Но, как говориться, будем еще посмотреть.

А теперь давайте я представлю вашему вниманию небольшую js-библиотеку для работы с медиа выражениями (media query) CSS. Т.е. данная заметка посвящена адаптивным дизайнам, что безусловно давно уже в тренде.

Скрипт носит название Enquire.js. Библиотека довольно маленькая и весит продакшен (минимизированная) версия всего — 2,2 кб. Enquire.js библиотека независимая, т.е. может работать без подключения jQuery и ей подобных. Давайте я все таки объясню для чего это все нужно и можно ли обойтись без лишних скриптов.

Мы знаем, чтобы изменить стиль элемента в CSS на определенном разрешении экрана достаточно написать стиль для определенного экрана, используя медиа запросы — @media. Но что делать, если нам нужно задействовать какой либо скрипт JS на том же размере экрана. Как раз для этого случая нам и понадобится enquire.js. Можно конечно и самому написать данный скрипт, но применение enquire намного удобнее, т.к. у нее есть несколько приятных особенностей.

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

Подключение и регистрация событий

Подключаем саму библиотеку до основного файла js, в котором мы пишем наш код.

<script src="/js/enquire.min.js"></script>

Вызываем скрипт методом — register.

enquire.register("screen and (max-width: 1200px)", { // and (orientation: landscape) || portrait
 
 // НЕ ОБЯЗАТЕЛЬНО 
 // Срабатывает вызов, когда соответствует указанному медиа запросу - matched 
 match: function() {},
 
 // НЕ ОБЯЗАТЕЛЬНО
 // Срабатывает вызов, когда перестает соответствовать указанному медиа запросу - unmatched 
 // переходит из состояния matched в unmatched.  
 unmatch: function() {},

 // НЕ ОБЯЗАТЕЛЬНО 
 // Срабатывает один раз, когда обработчик зарегистрирован  
 setup: function() {},

 // НЕ ОБЯЗАТЕЛЬНО, по умолчанию - false 
 // Если значение истина - "true", то откладывает выполнение функции до первого совпадения с медиа запросом (matched)  
 deferSetup: true,

 // НЕ ОБЯЗАТЕЛЬНО 
 // Срабатывает код, когда обработчик переходит в состояние незарегистрированный (unregistered). 
 destroy: function() {}

});

Теперь давайте разберем на примерах.

Примеры

Match & Unmatch

Откройте демо-страницу и начните уменьшать окно браузера и после Max 990px вы увидете изменения, далее снова верните окно в исходное состояние.

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

enquire.register("screen and (max-width: 990px)", {
  match: function () {
    $('.info-block__match').addClass('info-block_match-active');
    $('.info-block__unmatch').removeClass('info-block_unmatch-active');
  },
  unmatch: function () {
    $('.info-block__match').removeClass('info-block_match-active');
    $('.info-block__unmatch').addClass('info-block_unmatch-active');
  }
});

Setup & DeferSetup

Иногда бывает нужно, чтобы код JS сработал только один раз, например, когда мы делаем ajax запрос. В примере выше наш код будет срабатывать всякий раз, когда будет совпадение медиа запроса. Для этого воспользуемся методом Setup и deferSetup.

enquire.register("screen and (max-width: 990px)", {
  deferSetup: true,
  setup: function () {
    alert("Совпадение - match");
  }
});

Как видите при уменьшении экрана браузера окно Alert’a показывается только один раз и не важно меняете вы далее размер или нет. Если не передать методу deferSetup истину — true, то окошка алерта будет выскакивать постоянно, т.к. метод Setup срабатывает как только обработчик будет зарегистрирован.

В последнее время я практически всегда использую enquire.js, без него будет очень сложно верстать под мобильные устройства. Раньше я умудрялся располагать блоки на мобильном экране абсолютным позиционированием. Но это было долго и нудно, да и не в каждом случае может прокатить. С помощью же enquire.js я просто перемещаю объекты по DOM дереву документа.

Естественно можно продублировать один и тот же объект два раза и показывать его на определенном разрешении экрана, через CSS, но это будет не правильно. Зачем создавать лишние запросы, загружая сервер и браузер. Такие манипуляции скажутся на быстродействии сайта. Также на одной странице не должно быть повторяющихся одинаковых индефикаторов. Так можно поступить с небольшими объектами, например, иконки. А вот, например, модуль меню дублировать не стоит, тем более, если оно содержит очень много пунктов.

Таким образом, используя Enquire.js и медиа запросы CSS мы можем быстро и качественно верстать адаптивные сайты. Мне лично помогает такой подход.

На этом сегодня все. До встречи в следующих постах!