Контейнерные запросы и медиазапросы
Понимайте, когда для компонентного дизайна использовать контейнерные запросы, а когда медиазапросы области просмотра.
«Контейнерные запросы и медиазапросы» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Принципиальное различие
Медиазапросы реагируют на размеры области просмотра. Контейнерные запросы реагируют на размеры родительского контейнера. Это различие определяет, какой инструмент следует использовать для каждой задачи.
Когда использовать медиазапросы
Используйте медиазапросы для:
- глобальных изменений макета страницы (одна или две колонки)
- показа и скрытия крупных разделов страницы (выдвижная панель навигации на мобильных устройствах)
- масштабирования базового размера типографики на уровне страницы
- стилей для печати
- запросов пользовательских предпочтений (тёмная тема, уменьшение анимации)
Когда использовать контейнерные запросы
Используйте контейнерные запросы для:
- изменений макета на уровне компонента (горизонтальное или вертикальное расположение карточки)
- компонентов, размещённых в неизвестных контейнерах (боковая панель, основная область, боковая панель внутри основной области)
- повторно используемых компонентов дизайн-системы
- виджетов, встроенных в страницы сторонних сайтов
Аргумент в пользу переносимости
Карточка, оформленная с помощью медиазапросов, работает на одной точке перехода на странице шириной 1200px. Если переместить эту карточку в боковую панель, ей могут потребоваться другие точки перехода. С контейнерными запросами та же карточка просто продолжает работать: она адаптируется к доступному ей пространству.
Совместное использование
В реальных приложениях используются оба подхода. Медиазапросы определяют общий макет (боковая панель появляется при ширине, соответствующей настольному устройству), а контейнерные запросы определяют поведение компонентов внутри этого макета.
<div class="layout">
<div class="sidebar"><div class="card">Sidebar card</div></div>
<div class="main-content"><div class="card">Main card</div></div>
</div>
Специфичность контейнерных запросов
В отличие от медиазапросов, которые не добавляют специфичности, контейнерные запросы добавляют специфичность контекста. Правило внутри @container (min-width: 400px) имеет такую же специфичность, как то же правило за его пределами, но применяется только в контексте этого контейнера.
Поддержка браузерами
Контейнерные запросы поддерживаются всеми современными браузерами начиная с 2023 года (Chrome 105+, Firefox 110+, Safari 16+). Сегодня их безопасно использовать в новых проектах без запасных вариантов для современных целевых браузеров.
Прогрессивное улучшение с помощью @supports
Для проектов, которым требуется поддержка старых браузеров, используйте @supports, чтобы проверить поддержку контейнерных запросов:
<div class="card-wrapper"><div class="card">Progressively enhanced card</div></div>
Сравнение производительности
Контейнерные запросы имеют свои особенности производительности: каждый элемент с container-type создаёт границу изоляции макета. Это предотвращает влияние изменений размеров внутри элемента на внешнюю область, что фактически повышает производительность. Изменения, вызванные медиазапросами, могут запускать глобальные перерасчёты макета.
Отладка контейнерных запросов
Chrome DevTools показывает метку "cq" рядом с элементами-контейнерами на панели «Элементы». Нажмите её, чтобы визуализировать границы контейнера и проверить условия контейнерного запроса с помощью инспектора компоновки DevTools.
Быстрая проверка
Компонент карточки дизайн-системы должен переключаться с вертикального макета на расположение рядом друг с другом в зависимости от доступной ширины в любом контексте. Какой подход лучше?
Повторение
Медиазапросы реагируют на глобальную область просмотра, а контейнерные запросы — на размер родительского контейнера. Используйте медиазапросы для решений, касающихся глобального макета, и запросов пользовательских предпочтений. Используйте контейнерные запросы для повторно используемых компонентов, которым нужно адаптироваться к своему контексту. Сочетайте оба подхода: медиазапросы — для общего макета страницы, контейнерные запросы — для адаптации компонентов внутри этого макета.
Изучай CSS с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 40
- Уроки
- 159
Часто задаваемые вопросы
Урок «Контейнерные запросы и медиазапросы» бесплатный?
Да — полный текст урока «Контейнерные запросы и медиазапросы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Контейнерные запросы и медиазапросы»?
Понимайте, когда для компонентного дизайна использовать контейнерные запросы, а когда медиазапросы области просмотра. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Контейнерные запросы и медиазапросы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- container-type и container-name
- Правила @container и контрольные точки
- Единицы контейнерных запросов: cqw и cqh
- Контейнерные запросы и медиазапросы