Контейнерные запросы предлагают очень динамичный и гибкий подход к адаптивному дизайну. Контейнерные запросы используют правило @container . Это работает аналогично медиа-запросу с @media , но вместо этого @container запрашивает информацию о стилях у родительского контейнера, а не у области просмотра и пользовательского агента.
Благодаря возможности адаптации к размеру контейнера, контейнерные запросы позволяют компонентам подстраиваться под свое местоположение в интерфейсе. Например, компонент карточки может изменять свой размер и стиль в зависимости от контейнера, в котором он размещен, будь то боковая панель, главный раздел или сетка в основной части страницы.
Как показано на следующей иллюстрации, вы можете комбинировать медиазапросы для макромакетов, контейнерные запросы для микромакетов с медиазапросами, основанными на пользовательских предпочтениях, чтобы создать мощную адаптивную систему дизайна. Подробнее о контейнерных запросах и новом адаптивном дизайне читайте здесь.
Эта статья является частью серии материалов о том, как компании, занимающиеся электронной коммерцией, улучшили свои веб-сайты, используя новые возможности CSS и пользовательского интерфейса. На этот раз мы рассмотрим, как некоторые компании использовали контейнерные запросы и извлекли из них выгоду.
красный автобус
Компания redBus поддерживает и предоставляет различный код для мобильной и десктопной версий своих сайтов. После внедрения запросов к контейнерам на страницах «Чем заняться» и «Грузоперевозки» им удалось объединить этот код в единую кодовую базу для этих сайтов. Это сделало их адаптивными и сэкономило время на разработке. Следующий пример демонстрирует это на примере страницы «Грузоперевозки»:
Код
В следующем примере .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;
}
}
Влияние
| Ранее (в нескольких кодовых базах) | После (единой кодовой базы) | |
|---|---|---|
| Инфраструктура | Отдельная инфраструктура (высокие затраты). | Та же инфраструктура (сниженные затраты). |
| Дизайн | Отдельный пользовательский интерфейс, но плохая согласованность. | Решить эту задачу непросто, но возможно. |
| Производительность | Система проста в использовании, поскольку является отдельной, но дублирует усилия по повышению производительности. | Это зависит от конкретной страницы и функции, но показатель pageSpeedInsights от redBus превышает 80. |
| Разработка | Отдельные команды разработчиков. | Сокращение времени на 30–40%. |
Токопедия
На страницах с подробным описанием товара (PDP) на Tokopedia есть несколько вкладок с информацией о магазине и товаре. Ранее макет этой страницы был разделён на три колонки, и иногда название товара слева обрезалось для экранов меньшего размера (см. видео «До»).
Для решения этой проблемы компоновки они легко и быстро внедрили контейнерные запросы. После этого им удалось получить гибкую компоновку, в которой название продукта всегда было полностью видно (см. видео «После»).
До
После
Код
Следующий код запрашивает размер родительского контейнера с именем infowrapper . Если максимальная ширина infowrapper составляет 360 пикселей, width , margin, и padding дочерних компонентов корректируются.
Установка параметра container-type в inline-size задает размер inline-direction родительского элемента. В латинских языках, таких как английский, это будет ширина родительского контейнера, поскольку текст располагается в одну строку слева направо.
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 нашла решение своей проблемы, обратив внимание на многоточие в тексте на своем сайте. Это указывало на слишком маленькие контейнеры, из-за которых контент обрезается для пользователя.
Еще один хороший вариант использования контейнерных запросов для сайтов электронной коммерции — это поиск повторно используемых компонентов. Например, кнопка «Добавить в корзину» может отображаться по-разному в зависимости от родительского контейнера (например, только иконка, если она находится в карточке товара, и иконка с текстом, если это основной призыв к действию на странице). Кнопка может стать хорошим кандидатом для контейнерных запросов.
Вы можете выбрать поэтапный подход к улучшению своего сайта. Например, вы можете начать с более простых примеров, таких как пример с эллипсом из Tokopedia, и реализовать там контейнерные запросы. Затем постепенно находить больше примеров и улучшать CSS.
Ресурсы:
- Контейнерные запросы отображаются в стабильных браузерах.
- Контейнерные запросы — проектирование в браузере
- Демонстрация запросов к контейнерам
- Демонстрация: карточки запросов контейнеров
- Видео: Что нового в веб-интерфейсе — I/O 2023
- Хотите сообщить об ошибке или предложить новую функцию? Мы хотим услышать ваше мнение .
Ознакомьтесь с другими статьями этой серии, в которых рассказывается о том, как компании электронной коммерции извлекли выгоду из использования новых функций CSS и пользовательского интерфейса, таких как анимация, управляемая прокруткой, всплывающие окна, контейнерные запросы и селектор has() .