Элементные запросы: будущее адаптивного веб-дизайна

Элементные запросы: будущее адаптивного веб-дизайна

От автора: медиа запросы – неотъемлемая часть веб-дизайна, однако они далеко не всегда хорошо работают. В этой статье мы рассмотрим идею «элементных запросов», вокруг которой ходит много споров. Многие считают, что элементные запросы – это будущее адаптивного веб-дизайна.

С самого начала

Статья Итона «адаптивный веб-дизайн» навсегда изменила наш подход к сайтостроению. Его статья была быстро принята сообществом веб-дизайнеров и разработчиков, которые вдохновились его идеей. Появились такие методы, как “Mobile First”, “Desktop First” и “Device Agnostic”. Были разработаны шаблоны дизайна и новые стандарты. К примеру, появился тег picture. Сейчас в нашем распоряжении несчетное число фреймворков, облегчающих разработку и создание адаптивных сайтов.

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

Медиа запросы

Медиа запросы позволяют нам формировать стили под определенные устройства. Один из самых распространенных примеров использования медиа запросов – это изменение стилей для какого-то диапазона ширины экрана. К примеру, код ниже прячет сайдбар при просмотре сайта на экранах до 720px в ширину.

.site-sidebar {
    display: flex;
    flex: 1 1 320px;
}
@media ( max-width: 720px ) {
    .site-sidebar {
        display: none;
    }
}

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

.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:

/**
 * Профиль
 */
.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:

.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

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree