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