Один баннер для витрины, статьи и боковой колонки: когда нужны container queries

Осенью 2026 года один рекламный компонент редко живет в одном месте. Сегодня он стоит над статьей, завтра попадает в сетку карточек, затем появляется в узкой боковой колонке. Старый подход привязывает все изменения к ширине окна браузера. Но экран ноутбука может быть широким, а колонка внутри него - всего 280 пикселей. В результате баннер выбирает настольную композицию и сжимает текст до нечитаемого состояния.

Медиазапрос отвечает не на тот вопрос

Media query полезен, когда решение действительно зависит от окна или системной настройки: общей навигации, ориентации экрана, предпочтения уменьшенной анимации. Компоненту внутри макета чаще нужно знать собственную доступную ширину. CSS Container Queries позволяют проверять размеры предка-контейнера и применять правила к его потомкам. В спецификации CSS Containment Level 3 для этого используется container-type и правило @container.

Практический пример: один и тот же блок шириной 900 пикселей показывает иллюстрацию слева, текст в центре и кнопку справа. Между 480 и 899 пикселями текст и кнопка переходят под изображение. Ниже 480 пикселей используется короткий заголовок, иллюстрация кадрируется квадратом, а второстепенная строка скрывается. Эти пороги относятся не к телефону или ноутбуку, а к тому месту, куда редактор вставил компонент.

Сначала составьте карту содержимого

До CSS выпишите обязательные элементы: бренд, предложение, срок, кнопка и юридически необходимая оговорка. Затем отметьте, что можно сокращать, переносить или заменять. Нельзя просто скрыть срок акции на маленькой ширине, если без него обещание становится вводящим в заблуждение. Зато длинную декоративную подпись можно убрать, а фотографию - заменить более тесным кадром.

Сделайте три эскиза с реальным текстом, а не с рыбой. Русское слово может быть длиннее английского, цена с разрядами занимает больше места, дата меняется. Компонент, рассчитанный на Купить, может сломаться от Узнать подробности. Тестируйте самый длинный допустимый вариант кнопки.

Контейнер задает композицию

Родительскому элементу назначают container-type: inline-size. После этого правила @container меняют сетку потомков при достижении нужной ширины. Не задавайте десяток порогов под конкретные модели устройств. Начните с двух точек, где композиция объективно перестает работать: текст становится слишком узким или кнопка переносится на две строки.

Новый компонент полезно проектировать как независимую карточку. Внешний макет определяет только доступное место и отступы, внутренний - расположение содержания. Тогда редакция переносит баннер между шаблонами без копирования CSS и без новых исключений для каждой страницы.

Размер картинки выбирает браузер

Container query меняет внешний вид, но не обязан сам загружать нужный файл. Для вариантов одного изображения используйте srcset с ширинами и атрибут sizes, описывающий предполагаемый размер на странице. Стандарт HTML позволяет браузеру выбрать подходящий ресурс из нескольких версий. Это особенно важно для экранов с высокой плотностью пикселей: им нужна более четкая картинка, но не обязательно полный оригинал камеры.

Если при узком размещении нужен не уменьшенный, а другой кадр, применяется художественное направление: отдельный источник для другой композиции. Например, широкий кадр показывает человека и интерьер, квадратный - лицо и продукт. Автоматическое обрезание по центру может удалить главный объект или текст на упаковке, поэтому важные варианты готовит дизайнер.

Текст внутри картинки создает долги

Изображение с нарисованным заголовком плохо переносит изменение ширины, языка и цены. Оно требует отдельного файла для каждой акции, не читается вспомогательными технологиями и теряет четкость при агрессивном сжатии. Оставляйте заголовок, цену и кнопку настоящими элементами HTML. Это позволяет переносить строки, менять контраст и обновлять предложение без пересборки графики.

Иллюстрации задайте aspect-ratio, чтобы место было известно до загрузки. Свойство object-fit управляет заполнением рамки, но проверьте точку интереса на всех вариантах. Лицо у правого края широкого кадра легко исчезает в квадрате. Для контролируемого кадрирования пригодится object-position или отдельный файл.

Проверяйте не только три красивых ширины

Откройте компонент в диапазоне от минимального до максимального размера с шагом, а не только на 320, 768 и 1440 пикселях. Поломки любят промежутки: на 517 пикселях кнопка уже переносится, но правило еще не переключило сетку. Проверьте увеличение текста до 200 процентов, длинный заголовок, отсутствие изображения и загрузку шрифта с задержкой.

Добавьте режимы без JavaScript и с отключенной анимацией, если компонент от них зависит. Основная ссылка и предложение должны оставаться доступными. Container queries работают на уровне CSS, поэтому базовая адаптация не требует вычислять ширину скриптом при каждом изменении окна.

Когда медиазапрос все же лучше

Не надо заменять container queries повсюду. Если мобильное меню меняется из-за общей ширины страницы, media query остается понятным решением. Если карточка должна одинаково работать в любой колонке, выбирайте контейнер. Часто оба подхода соседствуют: страница формирует крупную сетку по окну, а баннер перестраивает внутреннюю композицию по своему месту.

Хороший адаптивный рекламный блок не знает название устройства. Он знает, сколько места ему дали, какие элементы обязательны и какой ресурс нужен для этой ширины. Благодаря этому одна реализация переживает смену шаблона и не заставляет редакцию заказывать новый баннер для каждой колонки.