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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

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

Эта статья является частью серии, посвященной тому, как компании электронной коммерции улучшили свои веб-сайты с помощью новых функций 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;
   }
}

Влияние

Токопедия

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

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

До

После

Код

Следующий код запрашивает размер родительского контейнера с именем 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() .

• Почему возможности веб-интерфейса важны для вашего сайта электронной коммерции?
• Примеры использования анимации, управляемой прокруткой
• Посмотреть примеры использования переходов
• Тематические исследования Popover
• Примеры применения селектора :has()