CSS container queries в 2026 для статических сайтов и приёмки в Safari

Если вы отдаёте маркетинговые страницы или карточки дизайн-системы чистым HTML и CSS, точки останова по viewport часто врут: компонент выглядит нормально на весь экран, но ломается в узком сайдбаре или двухколоночной сетке. CSS container queries позволяют каждому блоку реагировать на собственный прямоугольник. В 2026 году их можно смело внедрять в командах с приоритетом Safari, если проверять в настоящем Safari на macOS, а не только в Chromium. Здесь разобрано, когда использовать @container, чем он отличается от @media и как встроить проверки в облачный Mac-воркфлоу вместе со статьёй STP и стабильный Safari.

Точки останова компонента и окна

Классический responsive привязывает вёрстку к ширине браузера — это логично было для одноколоночных блогов. Современные статические сайты переиспользуют герои, прайс-таблицы и тизеры в сайдбарах, подвалах и модалках — иногда одновременно. Герой на лендинге может быть 1200px, а в превью дашборда — 360px. Учить каждый экземпляр отдельными классами плохо масштабируется; container queries задают правило один раз: если родитель уже 28rem, кладу CTA под заголовок.

Команды реже слышат «у меня работает», когда в приёмку входит сессия Safari на macOS: у WebKit по-прежнему отличаются метрики шрифтов и субпиксельное округление в пограничных случаях flex/grid от Chromium. Container queries не убирают эти отличия, но снижают число переполнений из-за неверных допущений про viewport. Сочетайте модель с пайплайном Vite 7 и Tailwind CSS v4: плагин @tailwindcss/container-queries или нативный CSS хорошо укладывается в статический экспорт.

В дизайне фреймы с авто-раскладкой часто близки к будущим CSS-контейнерам. Если инженерия отражает это через документированные container-name и пороги в rem, расхождение макет/код уменьшается. В гайдлайне зафиксируйте, какие модули всегда идут через контейнер (карточки, фильтры, встраиваемые виджеты), а какие сознательно зависят от viewport (главное меню).

Синтаксис, который вы реально выкатите в 2026

Минимум: объявить контекст на родителе и спрашивать его у потомков:

.card-wrapper {
  container-type: inline-size;
  container-name: pricing;
}

@container pricing (min-width: 32rem) {
  .card { flex-direction: row; }
}

container-name необязателен, но спасает при вложенных контейнерах — маркетинговый сайт со sticky-оглавлением и виджетами регистрации. container-type: size нужен, когда важна высота; контейнер должен иметь определённый размер по блоковой оси. Новички забывают min-height и не понимают, почему запросы не срабатывают.

Для progressive enhancement оставьте грубый @media (max-width: 40rem) как приближение мобильной схемы, а десктопные колонки уточняйте контейнерами. Несколько десятков строк на компонент покупают совместимость с аудиторией Safari 15 в образовании и киосках. Порог поддержки опишите в README, чтобы подрядчики не возвращали только viewport из привычки.

Единицы вроде cqw удобны для «жидкой» типографики; гоняйте их параллельно в Safari Technology Preview и стабильном Safari, как в связанной статье про STP, прежде чем показывать клиенту.

Версии Safari и ритм релизов

Три факта для матрицы совместимости:

• Safari 16.0 (сентябрь 2022, iOS 16 и macOS Ventura) добавил size container queries по inline- и block-оси в соответствии со стабильной спецификацией.
• WebKit STP показывает возможности за месяцы до stable; для экспериментальных единиц проверяйте оба канала.
• Статический хостинг редко полифиллит container queries в чистом CSS; ResizeObserver на JS тяжелее, чем упрощённый мобильный fallback для старых WebView.

Если политика компании — «две последние мажорные версии Safari», container queries для новых статических проектов в 2026 уже внутри окна. Зафиксируйте отсечку в документации, чтобы спринты не откатывали практику назад.

Таблица решений: @container и @media

Сценарий	Предпочтительно	Почему
Глобальные поля и масштаб корневого шрифта	@media	Окно по-прежнему задаёт комфорт чтения для всего документа.
Переиспользуемая карточка в сетке и сайдбаре	@container	Ширина следует дорожке сетки, а не дихотомии телефон/десктоп.
Стили печати	@media print	Контейнеры не заменяют печатные правила.
Виджеты дашборда с фиксированной высотой в px	@container с size	Участвуют обе оси; задайте явную высоту обёртке.
Маркетинговый hero на всю ширину	Гибрид	Viewport задаёт максимум; внутренние промо — через контейнеры.

Статика, сборщики и страницы без JS

Eleventy, Hugo или свой Makefile выдают простой CSS; container queries не требуют бандлера — удобно при лимитах на зависимости. Если бандлите, PostCSS 8.4+ пропускает @container без специальных флагов, в отличие от ранних префиксов Grid.

Производительность: браузер считает container queries на этапе layout; сотни глубоко вложенных контейнеров на длинной странице могут стоить дорого на слабом iPhone. Обычно на маркетинге 20–40 именованных контейнеров на маршрут, и на Mac с Apple Silicon в Web Inspector дополнительное время layout остаётся заметно ниже 5 мс. Режьте гигантские страницы или виртуализуйте списки раньше, чем оптимизируете каждый запрос.

Доступность та же: при смене вёрстки на порогах контейнера сохраняйте порядок фокуса и видимые подписи. После правок проверяйте VoiceOver на macOS. На многоязычных статических сайтах длинные переводы меняют «логическую» ширину карточки — ещё один аргумент за контейнерные переносы.

При миграции с utility-first проверьте классы @md: и @lg:: многие завязаны на viewport и тихо конфликтуют с карточками на контейнерах. Разумный рефакторинг 2026: сначала сайдбары и врезки на @container, навигация и сетка подвала на @media, разделение описано в стайлгайде. Планируйте квартальные ревью, чтобы под дедлайнами не вернулись старые привычки.

Дизайн-системы и соглашения об именах

Единые префиксы container-name (ds-card, ds-filter) ускоряют чтение в DevTools и онбординг. В комментариях указывайте порог в rem и в пикселях для дизайнеров — так проще согласовать длинные русские заголовки в одной карточке.

Если токены приходят из Figma, вынесите именованные пороги контейнера в один файл вместо магических чисел в каждом компоненте. В CI можно добавить правила Stylelint: при вложении в переменную колонку сетки требуется container-type.

Типичные ошибки и отладка

Забытый min-width: 0 у flex-ребёнка сжимает контейнер непредсказуемо. Сочетание overflow: hidden на контейнере с position: sticky у детей часто ломает портал прокрутки и искажает измеренную ширину. width: 100vw у потомка игнорирует контейнер и даёт горизонтальный скролл в мобильном Safari.

Отладка на реальном Mac яснее показывает активный контainment-контекст, чем только Linux-скриншоты. Отсюда польза выделенного узла Safari — например арендованного Mac mini.

QA на арендованном Mac mini

Подключитесь по SSH или VNC к выделенному macOS, откройте Safari и включите адаптивный режим с «Показать линейки». Меняйте размер отдельных контейнеров, двигая сплиттеры вёрстки, а не только внешний viewport, и убедитесь, что min-width срабатывают как задумано. Сохраняйте видео для регрессии в 1440×900 и 390×844.

Узлы Mac mini на Apple Silicon дают тихую проверку WebKit без покупки железа каждому подрядчику. macOS даёт нативный Safari, Instruments и цветовые профили дисплея для CSS, который отличается от headless Linux. Если CI закрывает только Chromium, облачный Mac закрывает пробел при приёмке container queries в ту же неделю, что и merge.

FAQ

Заменяют ли container queries медиазапросы?

Нет. Медиазапросы по viewport остаются лучшими для типографики страницы и глобальной навигации. Container queries решают отзывчивость компонента, когда одна карточка в узком сайдбаре и в широкой колонке.

Какая версия Safari поддерживает @container?

С Safari 16.0 — size container queries на macOS и iOS. Для Safari 15 — progressive enhancement или простой flex-fallback.

inline-size или size для container-type?

Чаще достаточно container-type: inline-size; size требует явной высоты. size — когда в дизайне участвуют обе оси, например плитки дашборда.

Ужимая статическую лендинговую страницу или многоязычную документацию, вы выравниваете CSS с реальным положением блоков. Mac mini на Apple Silicon крутит Safari и статическую сборку с низким простоем и без шума вентилятора — удобно для повторяемых проверок WebKit без рассылки ноутбуков фрилансерам. MacHTML сдаёт в аренду физические Mac mini с SSH/VNC: поднимите Safari-лабораторию за минуты, уменьшите мощность после релиза и не замораживайте капекс в простаивающем железе.