Эта страница переведена с помощью Cloud Translation API.

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

Swetha Gopalakrishnan

Saurabh Rajpal

Контейнерные запросы предлагают очень динамичный и гибкий подход к адаптивному дизайну. Контейнерные запросы используют правило @container . Это работает аналогично медиа-запросу с помощью @media , но вместо этого @container запрашивает информацию о стиле у родительского контейнера, а не области просмотра и пользовательского агента.

Контейнерные запросы являются частью Baseline Newly Available .

Поддержка браузера

Источник

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

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

Изображение, показывающее, как сочетаются разные типы укладок. — web.dev — новый адаптивный подход.

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

красныйавтобус

redBus поддерживает и обслуживает разный код для своих мобильных и настольных версий. После реализации контейнерных запросов на страницах дел и грузов они смогли объединить этот код в единую кодовую базу для этих сайтов. Это сделало их более отзывчивыми и сэкономило время разработки. Следующий пример демонстрирует это с использованием страницы Cargo:

Код

В следующем примере .bpdpCardWrapper — это родительский контейнер с именем bpdpSection .

Если контейнер bpdpSection имеет минимальную ширину 744 пикселя, font-size и line-height для компонентов, выбранных .bpdpCardContainer и .subTxt, .bpdpAddress обновляются.

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

Влияние

	До (несколько кодовых баз)	После (единая кодовая база)
Инфраструктура	Отдельная инфраструктура (высокая стоимость).	Та же инфраструктура (сниженная стоимость).
Дизайн	Отдельный пользовательский интерфейс, но плохая согласованность.	Решить сложно, но возможно.
Производительность	Легко управлять, поскольку система является отдельной, но дублирует усилия по повышению производительности.	Это зависит от страницы и функции, но оценка redBus PageSpeedInsights превышает 80.
Разработка	Отдельные команды разработчиков.	Сокращение времени на 30% - 40%.

Токопедия

Страницы сведений о продукте (PDP) Токопедии содержат несколько вкладок для информации о магазине и продукте. Раньше макет этой страницы был разделен на три столбца, и иногда название продукта слева обрезалось для экранов меньшего размера (см. следующее видео «До»).

Чтобы решить эту проблему компоновки, они легко и быстро внедрили контейнерные запросы. После этой реализации они смогли создать гибкий макет, в котором название продукта всегда было полностью видно (см. следующее видео «После»).

До

Перед выполнением контейнерных запросов слова «ISKU 10 в 1 Obeng satu..» в левом верхнем углу обрезаются для экранов меньшего размера.

После

Реализация контейнерных запросов корректирует макет, сохраняя текст в области просмотра.

Код

Следующий код запрашивает размер родительского контейнера с именем infowrapper . Если максимальная ширина infowrapper составляет 360 пикселей, width , margin, и padding дочерних компонентов корректируются.

Установка container-type в inline-size запрашивает размер родителя в линейном направлении. В латинских языках, таких как английский, это будет ширина родительского контейнера, поскольку текст движется по строкам слева направо.

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

Что следует учитывать при использовании контейнерных запросов

Tokopedia нашла вариант использования, найдя на своем сайте многоточие в тексте. Это указывало на то, что контейнеры могут быть слишком маленькими, что приводит к обрезанию содержимого для пользователя.

Еще один хороший вариант использования контейнерных запросов для сайтов электронной коммерции — поиск повторно используемых компонентов. Например, кнопка «Добавить в корзину» может отображаться по-разному в зависимости от родительского контейнера (например, только значок, если он находится на карточке продукта, и значок с текстом, если это основной призыв к действию на странице). Кнопка может быть хорошим кандидатом для запросов к контейнеру.

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

Ресурсы:

Контейнерные запросы попадают в стабильные браузеры
Контейнерные запросы – Проектирование в браузере
Демонстрации запросов к контейнерам
Демо: карточки запросов к контейнерам
Видео: что нового в веб-интерфейсе — I/O 2023
Хотите сообщить об ошибке или запросить новую функцию? Мы хотим услышать ваше мнение .

Изучите другие статьи этой серии, в которых рассказывается о том, какую выгоду компании электронной коммерции получили от использования новых функций CSS и пользовательского интерфейса, таких как анимация на основе прокрутки, всплывающее окно, запросы к контейнеру и селектор has() .