Element Queries (или «Container Queries») — средство для разработки более гибкой адаптивной вёрстки, но его включение в спецификацию пока под вопросом. В этой статье я расскажу, что такое Element queries и в каком состоянии находится сейчас.
Что такое Element Queries?
Element Queries позволяют элементам «реагировать» на собственные ограничения (а не на ограничения экрана, как это происходит при использовании Media Queries (@media). Это самая важная деталь, которую стоит понять. Media Queries служат для создания адаптивной вёрстки, но адаптивная вёрстка не состоит только лишь из Media Queries. Модули, компоненты и элементы интерфейса всегда подстраиваются под свойства экрана, поэтому Media Queries не является решением всех задач.
Примеры
В зависимости от ширины контейнера изображение идёт в один ряд с текстом или на разных рядах:
See the Pen EQCSS: Element Queries by Envato Tuts+ (@tutsplus) on CodePen.
Цвет элементов зависит от их собственной ширины:
See the Pen Nested Element Queries by Tommy Hodgins (@tomhodgins) on CodePen.
Сверстать любой ценой
Многие, кто ищет способы реализации адаптивной вёрстки, основанной на элементах, подключают JavaScript. Пока нет какого-то общепризнанного решения, поэтому у каждого разработчика оно своё. Впрочем, несмотря на различия, основные принципы остаются тем же. В будущем, когда будут разработаны спецификации, конечно же, всё приведётся к одному виду.