С появлением адаптивного веб-дизайна разработчики постоянно просили о возможности стилизовать элементы DOM в зависимости от их фактического размера, а не от размера области просмотра браузера (используя медиа-запросы ). Фактически, запросы контейнеров (первоначально запросы элементов) — это, пожалуй, самая востребованная функция CSS, которой до сих пор не хватает браузерам.
Уже есть много , много , много сообщений, которые точно объясняют, почему контейнерные запросы трудно реализовать в CSS и почему производители браузеров не решаются их реализовать. Если вы хотите насладиться этим сейчас, немного JavaScript может помочь:
c51c33e1533e68c3f8fd24633700789f
Тогда все выглядит так:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Точки останова , селектор и атрибуты стиля могут использоваться для определения различных точек останова, автоматического селектора и типа добавленных классов. Если вы используете сценарий, вы можете обратиться к вновь созданным классам следующим образом:
c51c33e1533e68c3f8fd24633700789f
Использование контейнерных запросов особенно полезно для элементов в наложениях, всплывающих окнах, боковых панелях или пользовательских элементах — даже сейчас, например, со сценарием выше.