Container Queries: The End of Media Queries?

Container Queries: Конец медиа-запросов?

Представьте, вы верстаете страницу и сталкиваетесь с тем, что при изменении размера родительского элемента все ломается. Знакомо? Вот и у нас, frontend-разработчиков, такая реальная боль! Выводим всё на одну страницу и сталкиваемся с проблемой адаптивности, не зная, как исправить кросс-браузерные неполадки и проблемы с медиазапросами. Хотя да, медиазапросы сделали свою работу в свое время, пора двигаться дальше!

Как мы страдали раньше

Раньше адаптивность сводилась к бесконечным медиазапросам, которые мы расставляли по всему коду, как на поле битвы. «Мобильная первая» стратегия была в моде, но что делать с элементами, которые менялись в зависимости от родителя, а не от вагона на экране? Как насчет сложных сеток, где одно неосторожное изменение в стиле могло обрушить вселенную? Aha, мы прибегали к костылям: абсолютное позиционирование, разные классы для мобильных и десктопов или даже хакали с JavaScript, чтобы пересчитывать размеры.

Можете вспомнить свой последний проект, где вы еле справились со всеми этими медиа-запросами, при этом хвалясь тем, как сделали адаптивное видео с помощью своих старых добрых методов? Кстати, напоминаю, что о таких подходах можно прочитать в нашем материале здесь.

Как делать правильно в 2026 году

Теперь к нам на помощь приходят container queries! Да, вы не ослышались. Это настоящая магия CSS, которая перевернула представление о том, как мы создаем адаптивные макеты. Представьте, что ваш стиль может изменяться в зависимости от размеров контейнера, а не только окна браузера! Это дает нам возможность создавать по-настоящему отзывчивые дизайны, которые учитывают контекст, в котором находятся элементы. Вы можете избавиться от лишних медиазапросов и писать более лёгкий и чистый код.

Вот так может выглядеть простая реализация:

.container {
    container-type: inline-size;
}

.card {
    background: lightblue;
    padding: 1rem;
    border-radius: 5px;
}

@container (min-width: 400px) {
    .card {
        background: lightgreen;
    }
}

В данном примере карточка будет менять цвет фона в зависимости от ширины контейнера, а не окна браузера. Это удобно, не правда ли?

Частая ошибка новичков

Не обольщайтесь! Даже с контейнерными запросами можно попасть в ловушку. Частая ошибка, которую совершают многие новички, — это отсутствие понимания, как работать с ними. Они могут начать смешивать медиазапросы и контейнерные запросы, что приводит к путанице и избыточному коду. Убедитесь, что вы используете контейнерные запросы там, где они действительно необходимы. Следите за тем, чтобы не перегружать структуру и оставаться в рамках логики адаптивного дизайна.

🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!