Zapytania o kontener
zapewniają bardzo dynamiczne i elastyczne podejście do projektowania responsywnego
Zapytania o kontener używają reguły @container. Działa to podobnie do zapytania o media z regułą @media, ale zamiast widocznego obszaru i agenta użytkownika reguła @container wysyła zapytanie do kontenera nadrzędnego o informacje o stylach.
Dzięki reagowaniu na rozmiar kontenera zapytania o kontener umożliwiają komponentom dostosowywanie się do ich lokalizacji w interfejsie. Na przykład komponent karty może dostosować swój rozmiar i style do kontenera, w którym się znajduje, np. do paska bocznego, sekcji głównej lub siatki w głównej części strony.
Jak pokazano na ilustracji poniżej, możesz połączyć zapytania o media dotyczące układów makro, zapytania o kontener dotyczące układów mikro oraz zapytania o media oparte na preferencjach użytkownika, aby utworzyć zaawansowany system projektowania responsywnego. Więcej informacji o zapytaniach o kontener i nowym projektowaniu responsywnym.
Ten artykuł jest częścią serii, w której omawiamy, jak firmy e-commerce ulepszyły swoje witryny za pomocą nowych funkcji CSS i interfejsu. Tym razem przyjrzymy się, jak niektóre firmy korzystały z zapytań o kontener i jakie korzyści z tego odniosły.
redBus
redBus utrzymuje i udostępnia inny kod dla wersji mobilnej i desktopowej. Po wdrożeniu zapytań o kontener na stronach z atrakcjami i ładunkami firma mogła ujednolicić ten kod w jednej bazie kodu dla tych witryn. Dzięki temu witryny stały się responsywne, a czas programowania został skrócony. Poniższy przykład pokazuje to na stronie z ładunkami:
Kod
W tym przykładzie .bpdpCardWrapper jest kontenerem nadrzędnym o nazwie bpdpSection.
Jeśli kontener bpdpSection ma minimalną szerokość 744 piksele, aktualizowana jest wartość font-size i line-height komponentów wybranych przez .bpdpCardContainer oraz .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;
}
}
Wpływ
| Przed (wiele baz kodu) | Po (jedna baza kodu) | |
|---|---|---|
| Infrastruktura | Oddzielna infrastruktura (wysokie koszty). | Ta sama infrastruktura (niższe koszty). |
| Projektowanie | Oddzielny interfejs, ale słaba spójność. | Trudne do rozwiązania, ale możliwe. |
| Wydajność | Łatwe w obsłudze, ponieważ system jest oddzielny, ale powiela wysiłki związane z poprawą wydajności. | Zależy to od strony i funkcji, ale wynik redBus w PageSpeedInsights jest wyższy niż 80. |
| Programowanie | Oddzielne zespoły deweloperów. | Skrócenie czasu o 30–40%. |
Tokopedia
Strony szczegółów produktu w Tokopedii zawierają kilka kart z informacjami o sklepie i produkcie. Wcześniej układ tej strony był podzielony na 3 kolumny, a nazwa produktu po lewej stronie była czasami ucinana na mniejszych ekranach (zobacz film „Przed” poniżej).
Aby rozwiązać ten problem z układem, firma łatwo i szybko wdrożyła zapytania o kontener. Po tym wdrożeniu firma mogła mieć elastyczny układ, w którym nazwa produktu była zawsze w pełni widoczna (zobacz film „Po” poniżej).
Przed
Po
Kod
Poniższy kod wysyła zapytanie o rozmiar kontenera nadrzędnego o nazwie infowrapper.
Jeśli maksymalna szerokość infowrapper wynosi 360 pikseli, dostosowywane są wartości
width, margin, i padding komponentów podrzędnych.
Ustawienie container-type na inline-size powoduje wysłanie zapytania o rozmiar elementu nadrzędnego w kierunku wiersza. W językach łacińskich, takich jak angielski, będzie to szerokość kontenera nadrzędnego, ponieważ tekst przepływa w wierszu od lewej do prawej.
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;
}
`;
Co wziąć pod uwagę podczas korzystania z zapytań o kontener
Tokopedia znalazła swój przypadek użycia, szukając w swojej witrynie wielokropków. Wskazywało to na kontenery, które mogą być zbyt małe, co powoduje, że treść jest ucinana dla użytkownika.
Innym dobrym przypadkiem użycia zapytań o kontener w witrynach e-commerce jest wyszukiwanie komponentów, które są używane ponownie. Na przykład przycisk Dodaj do koszyka może być wyświetlany inaczej w zależności od kontenera nadrzędnego (np. tylko ikona, jeśli znajduje się na karcie produktu, oraz ikona z tekstem, jeśli jest to główny CTA na stronie). Przycisk może być dobrym kandydatem do zapytań o kontener.
Możesz wprowadzać stopniowe ulepszenia w swojej witrynie. Możesz na przykład zacząć od mniejszych przypadków użycia, takich jak przykład z wielokropkiem w Tokopedii, i wdrożyć tam zapytania o kontener. Następnie stopniowo znajdź więcej przypadków i ulepsz CSS.
Zasoby:
- Zapytania o kontener w stabilnych przeglądarkach
- Zapytania o kontener – projektowanie w przeglądarce
- Prezentacje zapytań o kontener
- Prezentacja: karty z zapytaniami o kontener
- Film: nowości w interfejsie internetowym – I/O 2023
- Chcesz zgłosić błąd lub poprosić o nową funkcję? Chcemy poznać Twoją opinię.
Zapoznaj się z innymi artykułami z tej serii, w których omawiamy, jak firmy e-commerce korzystały z nowych funkcji CSS i interfejsu, takich jak animacje oparte na przewijaniu, wyskakujące okienka, zapytania o kontener i selektor has().