Element Queries

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. Пока нет какого-то общепризнанного решения, поэтому у каждого разработчика оно своё. Впрочем, несмотря на различия, основные принципы остаются тем же. В будущем, когда будут разработаны спецификации, конечно же, всё приведётся к одному виду. 

Что почитать по теме

Комментарии