Zapytania o kontenery zapewniają bardzo dynamiczne i elastyczne podejście do elastycznego projektowania. Zapytania dotyczące kontenerów korzystają z reguły @container. Działa to podobnie jak w przypadku zapytania o multimedia z parametrem @media, ale @container wysyła do kontenera nadrzędnego informacje o stylu, a nie o widoczny obszar i klienta użytkownika.
Zapytania dotyczące kontenera są częścią sekcji Nowe dostępności bazowe.
Odpowiadając na rozmiar kontenera, zapytania dotyczące kontenerów pozwalają komponentom dostosowywać się do swoich lokalizacji w interfejsie. Na przykład komponent karty może dostosowywać swój rozmiar i style do kontenera, w którym się znajduje – może to być pasek boczny, baner powitalny lub siatka w głównej części strony.
Jak widać na ilustracji poniżej, możesz łączyć zapytania o media o układy makr, zapytania kontenerów dla mikroukładów z zapytaniami o multimedia opartymi na preferencjach użytkownika, aby stworzyć zaawansowany system projektowania elastycznego. Dowiedz się więcej o zapytaniach dotyczących kontenerów i nowym układzie elastycznym.
Ten artykuł jest częścią serii, która opisuje, jak firmy e-commerce ulepszyły swoje witryny za pomocą nowych funkcji CSS i interfejsu. Tym razem omówimy, jak niektóre firmy wykorzystywały zapytania o kontenery i odniosły korzyści z tych zapytań.
redBus
redBus obsługuje i udostępnia inny kod w wersjach na urządzenia mobilne i komputery. Po wdrożeniu zapytań dotyczących kontenerów na stronach Atrakcje i ładunek firma udało się ujednolicić kod w jedną bazę kodu dla tych witryn. To zwiększyło responsywność i zaoszczędziło czas na tworzeniu aplikacji. Poniższy przykład ilustruje to, korzystając ze strony koszyka:
Kod
W przykładzie poniżej .bpdpCardWrapper jest kontenerem nadrzędnym o nazwie bpdpSection.
Jeśli kontener bpdpSection ma minimalną szerokość 744 pikseli, wartości font-size i line-height dla komponentów wybranych przez .bpdpCardContainer i .subTxt, .bpdpAddress zostaną zaktualizowane.
//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 (pojedyncza baza kodu) | |
|---|---|---|
| Infrastruktura | Oddzielna infrastruktura (wysokie koszty). | Ta sama infrastruktura (obniżone koszty). |
| Projektowanie | Oddzielny interfejs, ale niska spójność. | Trudne do rozwiązania, ale możliwe. |
| Wydajność | Łatwy w obsłudze system, ponieważ jest niezależny, ale powielany podczas zwiększania skuteczności. | Te informacje dotyczą strony i funkcji, ale wynik PageSpeedInsights redBus przekracza 80. |
| Programowanie | Oddzielne zespoły programistów. | skrócenie czasu o 30%–40%; |
Tokopedia
Strony z informacjami o produkcie (PDP) Tokopedii zawierają wiele kart z informacjami o sklepie i produktach. Wcześniej układ tej strony był podzielony na 3 kolumny i czasami nazwa produktu po lewej stronie była przycięta na mniejszych ekranach (zobacz film „Przed”).
Aby rozwiązać ten problem z układem, zespół łatwo i szybko wdrożył zapytania dotyczące kontenerów. Dzięki temu uzyskano elastyczny układ, w którym nazwa produktu była zawsze w pełni widoczna (obejrzyj film „Po”).
Przed
Po
Kod
Poniższy kod wysyła zapytania o rozmiar kontenera nadrzędnego o nazwie infowrapper.
Jeśli maksymalna szerokość elementu infowrapper to 360 pikseli, następuje dostosowanie width, margin, i padding komponentów podrzędnych.
Ustawienie dla container-type wartości inline-size wysyła zapytania o rozmiar elementu nadrzędnego w kierunku wewnętrznym. W przypadku języków łacińskich, np. angielskiego, będzie to szerokość kontenera nadrzędnego, ponieważ tekst napisany jest w tekście 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ń dotyczących kontenerów
Firma Tokopedia znalazła swój przypadek użycia, szukając wielokropka na swojej stronie. Wskazano wtedy kontenery, które mogą być za małe, przez co treść była przycinana dla użytkownika.
Innym dobrym przypadkiem użycia zapytań o kontenery w witrynach e-commerce jest zwracanie uwagi na komponenty używane wielokrotnie. Na przykład przycisk Dodaj do koszyka może się różnić w zależności od kontenera nadrzędnego (np. tylko ikona na karcie produktu i ikona z tekstem, jeśli jest to główne wezwanie do działania na stronie). Ten przycisk może się sprawdzić w przypadku zapytań dotyczących kontenerów.
Możesz stopniowo ulepszać witrynę. Możesz np. zacząć od mniejszych przypadków użycia, takich jak przykład elipsy z Tokopedii, i wdrożyć tam zapytania o kontenery. a następnie znajdować kolejne przypadki i ulepszać usługi porównywania cen.
Przydatne materiały:
- Zapytania o kontenery trafiają do przeglądarek stabilnych
- Projektowanie zapytań dotyczących kontenerów w przeglądarce
- Wersje demonstracyjne zapytań o kontenery
- Prezentacja: karty zapytań dotyczących kontenerów
- Wideo: co nowego w interfejsie internetowym – I/O 2023
- Czy chcesz zgłosić błąd czy poprosić o dodanie nowej funkcji? Chętnie poznamy Twoją opinię.
Zapoznaj się z innymi artykułami z tej serii, które przedstawiają korzyści dla firm z branży e-commerce dzięki zastosowaniu nowych funkcji CSS i interfejsu, takich jak animacje przewijane, wyskakujące okienka, zapytania o kontenery i selektor has().