Как адаптировать блок сайта через CSS container queries
Container queries меняют оформление блока по размеру его контейнера. Задайте контейнер, настройте условие и проверьте карточку в узкой и широкой области.
Что должно получиться
Одна карточка может стоять в основной колонке и в боковой панели. Ширина окна в обоих случаях одинакова, а места у карточек разное количество. Если ориентироваться только на окно, боковой вариант получит слишком широкую раскладку. Container queries позволяют связать внутренний вид компонента с доступным ему местом.
В узкой области изображение и описание располагаются друг под другом. Когда места достаточно, они становятся соседними колонками. Содержание и порядок чтения остаются прежними. Изменяется оформление, а не набор данных и не смысл действия.
Из чего это складывается
| Часть | Назначение | Что проверить |
|---|---|---|
| Внешняя область | Получает ширину от страницы | Размер не зависит только от содержимого карточки |
| Контейнер | Даёт размер для условия | Указан container-type |
| Внутренний блок | Меняет оформление | Находится внутри выбранного контейнера |
| Условие | Определяет момент смены раскладки | Порог выбран на реальном содержимом |
| Базовые стили | Сохраняют рабочий вид без улучшения | Текст и действие остаются доступны |
Контейнер и изменяемый элемент
Для проверки размера обычно нужна внешняя обёртка и элемент внутри неё. Условие для потомка опирается на подходящий контейнер среди его предков. Нельзя назначить карточку контейнером и ожидать, что это же условие перестроит её саму по её собственному размеру. Разделите область измерения и содержимое, которое меняет вид.
Для обычного горизонтального письма container-type: inline-size позволяет учитывать ширину области. Термин inline-size относится к направлению строки, поэтому при другом направлении письма его нельзя автоматически считать физической шириной. Значение size вводит ограничения и по второй оси; для простой карточки оно обычно избыточно.
Как это сделать по шагам
- Выберите один компонент и два места размещения: например, широкую колонку и узкую панель. Возьмите одинаковые данные, чтобы различия не скрывались за разным текстом.
- Сделайте базовую одноколоночную раскладку. Проверьте длинный заголовок, изображение и действие до добавления условий.
- Назначьте внешней обёртке container-type: inline-size. Убедитесь, что ширину обёртки задаёт её место на странице.
- При необходимости добавьте container-name. Имя помогает явно выбрать нужную область, когда контейнеров несколько.
- Добавьте правило @container для внутренней карточки. Перестраивайте её только тогда, когда реальное содержимое перестаёт помещаться удобно.
- Разместите две копии компонента на одной странице. Меняйте ширину их областей независимо от окна и наблюдайте, срабатывает ли нужное условие.
- Проверьте соседние размеры по обе стороны порога, увеличение текста и отсутствие поддержки правила. Сохраните пример с ожидаемым поведением для дальнейших изменений.
Небольшой пример условия
В учебном примере внешняя обёртка имеет класс slot, внутренняя карточка — tile. Начальная раскладка одноколоночная. CSS может выглядеть так: .slot { container-type: inline-size; container-name: product; } .tile { display: grid; grid-template-columns: minmax(0, 1fr); } @container product (min-width: 36rem) { .tile { grid-template-columns: 12rem minmax(0, 1fr); } }
Числа здесь показывают устройство примера, а не обязательные размеры карточки. Две колонки предполагают, что у tile есть подходящие дочерние области, например изображение и описание. Если структура другая, сначала определите, какие части должны стать колонками. После этого подберите порог и ширину изображения по своему содержимому.
Имя product выбирает подходящий именованный контейнер. Без имени используется ближайший подходящий предок для условия размера. При вложенных блоках это различие заметно: новая внутренняя обёртка может изменить, откуда берётся размер. Именование делает такую зависимость понятнее, но не заменяет проверку структуры.
Частые ошибки
Область теряет ожидаемую ширину
Ограничение размера по оси влияет на расчёт размеров самого контейнера. Особенно внимательно проверяйте обёртки, которые раньше растягивались только благодаря содержимому. Если область внезапно сжалась, разберите её место в Grid или Flexbox и правила ширины. Не добавляйте случайную фиксированную ширину ко всем карточкам, чтобы скрыть причину.
Условие привязано к названию устройства
Порог для компонента выбирают по месту, необходимому его содержимому. Карточка в узкой колонке большого экрана может требовать того же вида, что и карточка на телефоне. Названия вроде «планшетный режим» мешают увидеть эту задачу. Удобнее описывать результат: изображение рядом с текстом или над ним.
Базовый вариант перестаёт работать
Сначала задайте пригодную для использования раскладку, затем улучшайте её условием. Не прячьте обязательное действие в ветку, которая появляется только при большой ширине. Не меняйте визуальным порядком последовательность, которая становится непонятной при чтении с клавиатуры.
Как проверить
- Две одинаковые карточки на одном экране получают разный вид, когда их контейнеры имеют разный размер.
- При изменении ширины окна условие реагирует на область компонента, а не случайно на другую обёртку.
- Длинное название и увеличенный текст не выходят за границы колонок.
- До и после порога остаются видны изображение, описание и основное действие.
- Если правило @container не применяется, базовый вариант сохраняет читаемость.
- Вложенный компонент не перехватывает чужое имя контейнера и не меняет ожидаемую область измерения.
Перед настройкой разберите выбор Flexbox и Grid, затем проверьте применение CSS и вид страницы на телефоне. Если нужна помощь с компонентом, опишите задачу в разделе «Разработка».
Вопросы и ответы
Container queries заменяют условия для ширины окна?
Они решают разные задачи. Общую композицию страницы удобно связывать с окном, а повторно используемый компонент — с местом, которое ему выделили.
Нужно ли оборачивать каждый элемент?
Нет. Выбирайте границы самостоятельных компонентов. Лишние контейнеры усложняют понимание того, какой размер использует правило.
Почему условие не меняет сам контейнер?
Проверка размера относится к подходящему предку изменяемого элемента. Используйте внешнюю область для измерения и внутреннюю для перестроения.
Обязательно ли задавать имя?
В простой структуре можно обойтись без него. При нескольких вложенных областях имя помогает явно указать нужный контейнер и облегчает поддержку.
Можно ли взять один порог для всех карточек?
Только если это подтверждается содержимым и проверкой. Длинные названия, размеры изображений и набор действий у компонентов различаются.
Почему карточка изменилась после добавления обёртки?
Проверьте ближайший подходящий контейнер и расчёт его размера. Новая обёртка может изменить область измерения или доступное место.
Как проверить поведение без поддержки?
В тестовой копии отключите правило @container и оцените базовые стили. Страница должна сохранять содержание и доступные действия даже без улучшенной раскладки.