От автора: медиа запросы – неотъемлемая часть веб-дизайна, однако они далеко не всегда хорошо работают. В этой статье мы рассмотрим идею «элементных запросов», вокруг которой ходит много споров. Многие считают, что элементные запросы – это будущее адаптивного веб-дизайна.
С самого начала
Статья Итона «адаптивный веб-дизайн» навсегда изменила наш подход к сайтостроению. Его статья была быстро принята сообществом веб-дизайнеров и разработчиков, которые вдохновились его идеей. Появились такие методы, как “Mobile First”, “Desktop First” и “Device Agnostic”. Были разработаны шаблоны дизайна и новые стандарты. К примеру, появился тег picture. Сейчас в нашем распоряжении несчетное число фреймворков, облегчающих разработку и создание адаптивных сайтов.
Мы больше не делаем сайты под конкретные размеры экрана, браузеры или устройства. Теперь мы создаем сайты, которые отлично смотрятся на всех устройствах и размерах экрана. В этом нам помогают медиа запросы, но нельзя также забывать и про мета тег viewport.
Медиа запросы
Медиа запросы позволяют нам формировать стили под определенные устройства. Один из самых распространенных примеров использования медиа запросов – это изменение стилей для какого-то диапазона ширины экрана. К примеру, код ниже прячет сайдбар при просмотре сайта на экранах до 720px в ширину.
1 2 3 4 5 6 7 8 9 |
.site-sidebar { display: flex; flex: 1 1 320px; } @media ( max-width: 720px ) { .site-sidebar { display: none; } } |
Медиа запросы и устройства стали лучше. Появились такие функции как orientation и resolution. Пример ниже показывает, как можно использовать одну из этих функций для подстановки изображения большего размера на экранах с высоким разрешением.
1 2 3 4 5 6 7 |
.site-logo a { display: inline-block; background: url( images/logo.png ) no-repeat; } @media screen and ( min-resolution: 2dppx ) { background: url( images/logo@2x.png ); } |
Медиа запросы стали основным компонентом при проектировании адаптивного дизайна.
Но все же
Медиа запросы – не панацея для решения всех проблем в адаптивном веб-дизайне. На самом деле, они и не должны решать всех задач.
Сегодня на рынке огромное множество устройств с различными размерами экрана и формами, что размывает грань между мобильными устройствами и настольным компьютером (имею в виду гибридные ноутбуки). Все это серьезно усложняет поддержку красивого дизайна на всех устройствах, хороший пользовательский опыт и высокую производительность.
А если еще добавить рекламу, таблицы и старый контент, все может стать еще хуже. Очень скоро вы столкнетесь с не самыми лучшими сторонами медиа запросов.
Медиа запросы: все не так хорошо
Разберем следующий пример. У нас есть компонент интерфейса, с помощью которого мы хотим показать профили команды сайта. Данный компонент мы будем использовать в нескольких местах сайта. Пример ниже показывает, как наш UI компонент будет выглядеть на экранах шириной 780px.
На странице команды сайта шаблон сдвигается. Аватар теперь располагается сверху, а имя и биография снизу. Также может слегка уменьшиться размер шрифта.
Данную проблему можно пофиксить с помощью медиа запросов. Можно, к примеру, написать следующий код CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/** * Профиль */ .team-profile { text-align: center; } .team-profile .bio { margin-top: 20px; font-size: 14px; } @media ( min-width: 480px ) { .team-profile { text-align: left; display: flex; } .team-profile .avatar { flex: 0 0 120px; } .team-profile .bio { font-size: 16px; flex: 0 1 580x; } } /** * Карточка профиля. */ .team-profile-card { text-align: center; } .team-profile-card .bio { margin-top: 20px; font-size: 14px; } /** * Какие-то стили для перезаписи значений */ .page .team-profile-card { ... } |
Пока мы используем пару дополнительных классов .user-profile и .user-profile-card, мы можем это пофиксить.
Однако такой подход идет вразрез с идеей о повторном использовании нашего UI компонента. UI элемент, который можно поместить в любом месте сайта, и он адаптируется к окружению.
В примере необходимо, чтобы макет нашего компонента адаптировался, когда он находится внутри маленького контейнера, а не когда сжимается окно браузера. Чтобы не полагаться на размер окна браузера при изменении макета, почему бы не сделать это на элементном уровне?
Элементные запросы
Идея элементных запросов появилась в начале 2012 года. Парой лет позже адаптивный веб-дизайн стал самой популярной методологией. К сожалению, на тот момент разработчики не видели каких-то существенных причин, чтобы записать методологию в виде веб-стандарта. Мир тогда еще пользовался старыми методами.
Веб-сообщества развивали идею лишь на своем энтузиазме. RICG (Группа сообществ по решению проблем адаптивного дизайна) – группа, которая придумала тег picture, добавила элементные запросы в свой список проблем, пока другие разработчики создавали JS библиотеки типа EQCSS для эмуляции данного функционала.
Элементные запросы работают точно так же, как медиа запросы. Отличие в том, что они следят за размером элемента, а не размером окна браузера. Это позволяет создавать по-настоящему модульные системы интерфейсов с более чистым кодом. Стили нашего UI компонента можно переписать с помощь EQCSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.team-profile { text-align: center; } .team-profile .bio { margin-top: 20px; font-size: 14px; } @element ".team-profile" and ( min-width: 480px ) { .team-profile { display: flex; } .team-profile .avatar { flex: 1 1 120px; } .team-profile .bio { text-align: left; font-size: 16px; flex: 1 1 580x; } } |
Нас не интересует ширина окна браузера. По коду выше видно, что пока UI элемент растянут до 480px и шире, .avatar и .bio отображаются рядом. Когда ширина элемента ниже 480px, мы позволяем .avatar и .bio расположиться столбиком, а контент выравниваем по центру.
Заключение
Просто уточним, я не говорю, что использовать медиа запросы – это плохо. Медиа запросы – замечательный инструмент, который мы встречаем на множестве сайтов. Медиа запросы и элементные запросы могут сосуществовать. Однако существует множество сценариев в дизайне, когда намного лучше подойдут элементные запросы.
К сожалению, элементным запросам предстоит еще пройти очень долгий путь, прежде чем они станут веб-стандартом. Возлагаем наши надежды на хороших людей из RICG.
А пока мы ждем, можно изучать потенциал элементных запросов при помощи JS библиотеки EQCSS. Этим мы и займемся в следующем уроке. Следите за обновлениями!
Автор: Louie R
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.