Studia przypadków dotyczące zapytań dotyczących kontenerów

Swetha Gopalakrishnan

Saurabh Rajpal

Zapytania dotyczące kontenerów które zapewniają bardzo dynamiczne i elastyczne podejście do projektu. Zapytania dotyczące kontenerów używają reguły @container. Działa to podobnie do zapytania o media z użyciem argumentu @media, ale zamiast tego operator @container wysyła zapytanie do elementu nadrzędnego kontener do określania stylu, a nie widoczny obszar i klient użytkownika.

Zapytania dotyczące kontenerów są częścią nowości bazowej, które są ostatnio dostępne.

Reagując na rozmiar kontenera, zapytania umożliwiają komponentom adaptację do ich lokalizacji w interfejsie. Na przykład komponent karty może dostosować swój rozmiaru i stylów w zależności od kontenera, w którym się znajduje (np. na pasku bocznym, lub siatkę w głównej treści strony.

Jak widać na ilustracji poniżej, można łączyć zapytania o media w makrach układy, zapytania dotyczące kontenerów dla mikroukładów z multimediami opartymi na preferencjach użytkownika w celu utworzenia wydajnego systemu elastycznego projektowania stron. Odczytano więcej informacji o zapytaniach dotyczących kontenerów oraz nowe elastyczne projektowanie stron.

Ten artykuł jest częścią serii poświęconej firmom e-commerce. ulepszy swoje witryny za pomocą nowych funkcji CSS i interfejsu użytkownika. Tym razem skoncentrujemy się w jaki sposób niektóre firmy czerpią korzyści z zapytań dotyczących kontenerów.

redBus

redBus obsługuje i udostępnia różny kod w wersjach na urządzenia mobilne i komputery. Po zaimplementowaniu zapytań o kontenerach Atrakcje oraz cargo, udało się ujednolicić kod. w ramach jednej bazy kodu tych witryn. Dzięki temu reklamy były responsywne i zaoszczędzone czasu programowania. Ten przykład ilustruje to za pomocą strony z towarem:

Kod

W poniższym przykładzie .bpdpCardWrapper jest kontenerem nadrzędnym, o nazwie bpdpSection.

Jeśli kontener bpdpSection ma minimalną szerokość 744 pikseli, font-size i line-height w przypadku komponentów wybranych przez użytkowników .bpdpCardContainer i Zaktualizowano: .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

Tokopedia

Strony szczegółów produktów Tokopedii zawierają wiele kart sklepu i informacje o produktach. Wcześniej układ tej strony był podzielony na trzy a czasem nazwa produktu po lewej stronie została obcięta, aby zmniejszyć rozmiarów ekranu (zobacz film „Przed”).

Aby rozwiązać ten problem z układem, zespół łatwo i szybko wdrożył zapytania dotyczące kontenerów. Po wdrożeniu mieli elastyczny układ, w którym nazwa produktu była zawsze widoczna w całości (zobacz film „Po”).

Przed

Po

Kod

Ten kod wysyła zapytanie o rozmiar kontenera nadrzędnego o nazwie infowrapper. Jeśli maksymalna szerokość elementu infowrapper wynosi 360 pikseli, komponenty podrzędne width, margin, i padding są dostosowane.

Ustawienie container-type na inline-size powoduje zapytanie o rozmiar wbudowanego kierunku. rodzica. W językach łacińskich, takich jak angielski, będzie to szerokość w kontenerze nadrzędnym, bo tekst przesuwa się 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

Tokopedia znalazła w swojej witrynie wielokropki tekstu, aby znaleźć swój przypadek użycia. Wskazano kontenery, które mogą być zbyt małe i spowodować przycięcie treści. wyłączone dla użytkownika.

Kolejnym dobrym rozwiązaniem zapytań o kontenerach w przypadku witryn e-commerce jest pod kątem ponownie wykorzystanych komponentów. Na przykład może być widoczny przycisk Dodaj do koszyka w zależności od kontenera nadrzędnego (np. tylko ikona, jeśli znajduje się w kartę produktu i ikonę produktu z tekstem, jeśli jest to główne wezwanie do działania na stronie). może być dobrym rozwiązaniem dla zapytań dotyczących kontenera.

Możesz wprowadzać stopniowe ulepszenia w witrynie. Na przykład: można zacząć od mniejszych zastosowań, takich jak przykład elipsy z Tokopedii. implementować w niej zapytania dotyczące kontenerów. Następnie stopniowo wykrywaj kolejne przypadki ulepszyć usługę porównywania cen.

Zasoby:

• Zapytania dotyczące kontenerów trafiają do stabilnych przeglądarek
• Zapytania dotyczące kontenerów – projektowanie w przeglądarce
• Wersje demonstracyjne zapytań dotyczących kontenerów
• Prezentacja: karty zapytań dotyczących kontenerów
• Wideo: co nowego w interfejsie internetowym – konferencja I/O 2023
• Chcesz zgłosić błąd czy poprosić o dodanie nowej funkcji? Chcemy poznać Twoją opinię.

Przeczytaj inne artykuły z tej serii na temat tego, jak e-commerce firm, które skorzystały z nowych funkcji CSS i UI, takich jak przewijanie animacje, wyskakujące okienko, zapytania dotyczące kontenera oraz selektor has().

• Dlaczego funkcje interfejsu internetowego są ważne w przypadku witryny e-commerce?
• Animacje oparte na przewijaniu – studia przypadków
• Zobacz studia przypadków dotyczące przenoszenia
• Popover – studia przypadków
• :has() – studia przypadków