Container Queries: Конец медиа-запросов?
Сколько раз мы сталкивались с проблемами адаптации интерфейса на разных устройствах? Всю жизнь верстальщикам приходилось выкручиваться: то менять размер шрифтов, то передвигать блоки, а то и вовсе выстраивать сложную логику на JavaScript, чтобы подстраиваться под размеры экрана. Наконец-то, свет в конце тоннеля! Встречайте, container queries — наш новый супергерой против хаоса адаптивной верстки!
Как мы страдали раньше
Когда-то медиа-запросы были нашей единственной надеждой в борьбе за адаптивность. Применение разных стилей на основе ширины экрана, как в настоящем искусстве, превращалось в настоящую пытку. Помните те моменты, когда нужно было задать десяток @media правил, чтобы добиться нужного результата? Перепутанные классы, лишние div-обертки, слишком много фреймов … Да, это было время настоящих костылей!
Говоря о математических функциях в CSS, они не смогли бы решить проблему, что элемент может выглядеть совершенно по-разному в зависимости от контекста. Но теперь, когда технологии позволяют определять стиль контейнера, мы начали покорять новые вершины!
Как делать правильно в 2026 году
Мы входим в новую эру адаптивной верстки! Container queries позволяют задавать стили контейнера, а не экрана. Это значит, что теперь ваши элементы могут меняться в зависимости от их собственного размера. Представьте, что вы можете сделать так, чтобы кнопка всегда оставалась красивой и читабельной, независимо от места, которое она занимает!
Например, вы можете использовать следующий код для установки стилей в зависимости от ширины контейнера:
.container {
container-type: inline-size;
}
@container (min-width: 600px) {
.card {
background-color: lightblue;
}
}
@container (min-width: 900px) {
.card {
background-color: lightcoral;
}
}
С помощью этого простого подхода ваши элементы могут адаптироваться к контексту, в котором они находятся. Забудьте о громоздких медиазапросах, время креативного дизайна пришло!
Частая ошибка новичков
Но не спешите зашкаливать стаканы с кофе! Новички часто делают одну и ту же ошибку: пытаются применить контейнерные запросы так же, как и медиа-запросы, игнорируя их основную концепцию. Они строят логику, зависящую от ширины экрана, вместо контекста, в котором находится элемент. Не забывайте, каждый элемент должен быть независим и адаптироваться к своему контейнеру.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!