CSS Container Queries: Революция в адаптивной вёрстке.
Всем привет! Сегодня хочу поговорить о CSS Container Queries — новом инструменте, который значительно упростит жизнь фронтенд-разработчикам и откроет новые горизонты в создании адаптивных интерфейсов.
Что это такое?
Container Queries позволяют применять стили к элементам на основе размеров их родительского контейнера. Это значит, что теперь мы можем адаптировать внешний вид компонентов не только в зависимости от размеров окна браузера, но и от размеров их непосредственного окружения.
Container Queries упрощают код, избавляя нас от написания лишних media запросов и увеличивая гибкость вёрстки.
На данный момент Container Queries поддерживаются в Chrome, Edge и Safari. Firefox также работает над реализацией этой функции. Если вам нужно обеспечить кроссбраузерную совместимость, можно использовать полифилы или библиотеки, которые предоставляют аналогичный функционал.
Вот ссылка на доку: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
А еще очень понравился доклад Серёжи Попова на HolyJS: https://youtu.be/CgjbxiacyPg?si=lgfqP3zMx_K6emKY
Кстати, я нахожусь в поиске работы фронтенд-разработчиком. Если вам интересно, то напишите в личные сообщения:)
