CSS: За границами медиа-запросов. Время для фундаментальных решений.

Стóило мне только пролепетать в предыдущей заметке о том, что хорошо бы, мол, нашлись светлые головы, которые озаботились бы общим, системным подходом к проблеме адаптивной/отзывчивой верстки, как они тут же и нашлись. Всего пару недель назад индийская девушка-умница Richa Jain опубликовала статью "Beyond Media Queries — It’s Time to Get Elemental" ("За пределами медиа-запросов: пришло время фундаментальных решений"), краткий пересказ (читай: вольный перевод) которой и предлагается ниже.

Отметив большое влияние на Веб концептуальных идей Этана Маркотта, изложенных в статье "Responsive Web Design" еще в 2010-м, Richa посетовала, на то, что с тех пор "волшебные" медиа-запросы стали восприниматься как панацея.

"Иногда я думаю, не поняли ли мы слова Этана слишком буквально. Мы удовольствовались медиа-запросами. Мы набросились на медиа-запросы как на лучшее решение для отзывчивого дизайна... и перестали смотреть вокруг.
Не поймите меня превратно. Я люблю отзывчивый веб-дизайн. Он позволяет нам достаточно хорошо отображать одно и то же содержимое на самых разных устройствах. И я хорошо отношусь к медиа-запросам, которые, говоря упрощенно, позволяют менять верстку в зависимости от размера устройства. Но чем больше я работаю с ними, тем больше убеждаюсь, что ими часто и необоснованно злоупотребляют."

Далее Richa излагает (для тех, кто в танке) базовые понятия медиа-запросов. Грубо говоря, media queries позволяют веб-мастеру задавать разные стили для одних и тех же элементов в зависимости от устройства, отображающего страницу. Понятно, что в последние годы, вслед за взрывным развитием мобильных девайсов и насущной потребностью как-то адаптировать их к "нормальному" вебу, взлетела и популярность технологии медиа-запросов.

Но проблема (по Richa) в том, что использование медиа-запросов сводится к манипулированию размерами области отображения для тех или иных устройств, и, по сути, только к этому. Медиа-запросы не модульны. Они не позволяют веб-мастеру более гибко приспосабливать контент к устройствам, для чего может потребоваться перестройка контейнеров (блоков), а не только их размеров.

Richa приводит пример: предположим, мы хотим отобразить некий элемент ( отображающий, скажем, товары) по-разному на домашней странице и на странице описания товаров. Для home вид должен быть примерно такой:

А для страницы описания такой:

"Ну, и как вы этого добьетесь? – спрашивает автор.– Медиа-запросами? Но они могут лишь изменить размеры области просмотра. Мы даже не будем отвлекаться на размеры. Наша задача в другом: чтобы наш элемент выводился по-разному в зависимости от того, в какой контейнер он попадает, – на всю ширину страницы или в узкую боковую панель. Медиа-запросы здесь бесполезны. Есть ли в CSS еще какие-то методы, которые позволили бы нам решить эту задачу "чисто" и прямо, без хаков, дополнительных скриптов и т.п.? Печально, но, насколько я знаю, нет. Хейдон Пикеринг бился об эту же стену, пытаясь сделать свой проект независимым от содержания и числа элементов."

В следующей главке "Modularity Goes Out the Window" ("Модульность должна идти от окна") Richa формулирует требования, очень, надо сказать, близкие мне по духу.

"Чтобы решить задачу, приведенную выше, я должна была бы верстать элемент по разному в зависимости от устройств отображения. Если я хочу при этом создать отзывчивый дизайн и учесть разные размеры, у меня появляются серьезные трудности. Я даже боюсь представить, насколько при этом запутается код. Вы можете посмотреть материал Сторма Тейлора о борьбе с медиа-запросами, публикацию Скотта в FilamentGroup и обсуждение проблемы Тайсоном Матаничем. Да, я не единственная, кто борется с этим.
Я люблю чистый, ясный код. Мне нравится сохранять его модульность. Я привержена принципу DRY. И я не люблю рассыпáть, как конфетти, один и тот же код повсюду в разных местах.
Главная задача: если элемент стал слишком узким (или маленьким, и т.п), надо иметь возможность лишь немного изменить стиль. Должен быть простой способ сделать это без того, чтобы всё запутать. Должен быть способ связать стиль элемента с его контейнером вместо области просмотра и размеров устройства."

Richa кратко упоминает некоторые обходные решения этой задачи, предложенные творческими людьми, старающимися облегчить жизнь нам, смертным:

• Elementary Скотта Джеля
• Element Queries Тайсона Матанича
• EQ.js Сэма Ричардса
• CSS Element Queries Marcj

Все они хороши и служат своей цели. Но каждое из них имеет свои ограничения и добавляет свои сложности.

Нам нужно что-то более простое, более чистое, встроенное в CSS.

Почему у нас до сих пор нет "запросов элементов" (element queries)?

О таком механизме, который действовал бы подобно media queries , но в связи с компонентом, а не областью просмотра, идет много дискуссий. Но практическая работа над проектами сценариев использования и требованиями всё еще находится в начальной стадии. Основная трудность заключается в порочном круге: есть много способов, которыми можно определить размер элемента в зависимости от его содержания. Но что делать, если содержание в свою очередь зависит от размера? Что должно быть сначала, курица или яйцо? Дебаты пока что находятся на этапе разрешения этого вопроса.

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

media queries и element queries взаимно дополняют друг друга. Они адресованы разным ситуациям и разным потребностям. Мы не можем успокоиться на том, что у нас есть медиа-запросы, иначе, при нынешнем взрывном росте веба, мы скоро получим миллиарды сайтов с плохо структурированным кодом, напичканным избыточными фрагментами. Автор призывает разработчиков перейти от знакомого нам по социализму чувства глубокого удовлетворения media queries или вялого обсужденя их кривизны к работе над созданием новых инструментов веб-разработки.

Я же, со своей стороны, убедился, что мои робкие пожелания увидеть у компетентных товарищей более системный подход к положению в CSS – не просто обычное дилетантски-потребительское "сделайте мне красиво": проблема действительно существует, она носится в воздухе и активно осознается, а значит (хочется верить), найдутся и решения.