Javascript

Изучаем matchMedia API и object MediaQueryList

Продолжаем осваивать управление media queries при помощи javascript. На этот раз речь пойдёт о matchMedia API. Как результат работы — вы получите готовый шаблон, который можно смело внедрять в свои проекты.

В предыдущей статье, посвещенной enuire.js, мы говорили о том, как работать с media queries при помощи javascript. Enuire.js — замечательный инструмент для создания mobile-first сайтов и приложений, основанный на matchMedia API. Чтобы лучше понять тему, давайте с этим самым matchMedia и разберёмся.

Предпосылки и источники

Прежде всего, давайте разберёмся с совместимостью данной технологии с версиями браузеров. В этом нам поможет прекрасный сайт caniuse.com. Из таблицы видно, что все текущие версии браузеров, за исключением Opera Mini, поддерживают matchMedia. Что касается предыдущих версий — то тут, стоит обратить внимание главным образом на IE 9.0 и Opera 12.0, которые хотя и понимают CSS3 Media Queries, но не поддерживают matchMedia.

matchMedia_1

Проблемму совместимости помогают решить различные polyfill‘ы, о которых мы уже говорили в предыдущей статье. Рекомендую обрать внимание на media-match.

Итак, приступим. Прежде всего, определимся с первоисточником. Для нас — это, конечно же, спецификация W3C. Если что-то из ниже описанного будет расходится со спецификацией или устареет — смело кидайте камнями (лучше, конечно, пишите в комментариях).

Рассмотрим простой пример

Допустим, нам необходимо добавлять к некоторому диву класс "some-class" лишь в том случае, когда ширина экрана браузера больше или равна 768 пикс. Делается это очень просто:

Метод window.matchMedia() принимает в качестве аргумента строку — media query (в нашем случае — это "screen and (min-width: 768px)") и возвращает объект MediaQueryList. В свою очередь, объект MediaQueryList имеет 2 атрибута и 2 метода.

Объект MediaQueryList

  • Media — атрибут readonly (строка).
  • Matches — астрибут readonly (true/false). Определяет, совпал ли заданный media query с текущим размером экрана
  • addListener — метод, «включающий» прослушку на изменение ширины экрана
  • removeListener — метод, «выключающий» прослушку.

Вот вам скриншот из хрома, для пущей наглядности:

matchMedia_2

Начинаете понимать, как всё это работает? Window.matchMedia("screen and (min-width: 768px)") возвращает нам объект MediaQueryList, в котором нас пока интересовал только атрибут matches. Но данный пример сработает у нас только один раз, при инициализации. А что, если пользователь изменит размер экрана? Тут нам на помощь приходит метод addListener.

Рассмотрим пример более жизненный

Прежде всего мы объявляем функцию setup_for_width(), в которую будем передавать объект MediaQueryList (mql). Функция очень проста. Если mql.matches = true, то добавляем класс "some-class" к диву. В противном случае, удаляем этот класс.

Далее, объявляем переменную mql, в которую записываем созданный объект MediaQueryList.

После чего «включаем» прослушку addListener на изменение объекта mql. При каждом его изменении будет вызываться функция setup_for_width(), а значит удаляться/добавляться класс "some-class", чего мы, в конечном итоге, и добивались.

В заключение, вызовем нашу функцию setup_for_width(mql), чтобы она сработала в момент первой загрузки страницы (до первого изменения media query).

Задача выполнена! Вы можете смело использовать данный шаблон на своих проектах, главное не забудьте о поддержке более ранних версий браузеров. Кстати, о том, как правильно подключать polyfill (для тех, кто ещё не умеет пользоаться modernizr), я говорил в предыдущем уроке :) Возникнут вопросы — пишите!

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

One thought on “Изучаем matchMedia API и object MediaQueryList

  1. А зачем добавлять какой-то класс, в случае соответствующей ширины экрана? Почему не изменять css у уже существующего класса в случае изменения ширины экрана (срабатывании другого медиа-запроса)? Просто не очень понимаю конкретный кейс на практике, когда нужно именно добавлять класс, можете привести пример?

    Спасибо.

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