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