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

Swetha Gopalakrishnan

Saurabh Rajpal

Zapytania dotyczące kontenerów zapewniają bardzo dynamiczne i elastyczne podejście do projektowania responsywnego. Zapytania dotyczące kontenerów używają reguły @container. Działa ona podobnie do zapytania medialnego z użyciem @media, ale zamiast tego @container wysyła zapytanie do nadrzędnego kontenera w celu uzyskania informacji o stylu zamiast do viewportu i agenta użytkownika.

Zapytania dotyczące kontenera są częścią dostępnej nowo wersji podstawowej.

Zapytania o kontenery pozwalają komponentom dostosować się do ich lokalizacji w interfejsie, odpowiadając na rozmiar kontenera. Na przykład element karty może dostosowywać swój rozmiar i style do kontenera, w którym się znajduje, czy to paska boczna, sekcja główna czy siatka w głównej części strony.

Jak widać na ilustracji poniżej, możesz łączyć zapytania dotyczące multimediów w przypadku makrolayoutów, zapytania dotyczące kontenera w przypadku mikrolayoutów oraz zapytania dotyczące multimediów na podstawie preferencji użytkownika, aby tworzyć wydajny system projektowania responsywnego. Dowiedz się więcej o zapytaniach dotyczących kontenerów i nowym responsywnym układzie.

W tym artykule omawiamy, jak firmy z branży e-commerce ulepszają swoje witryny, korzystając z nowych funkcji CSS i interfejsu. Tym razem przyjrzymy się temu, jak niektóre firmy korzystały z zapytań dotyczących kontenerów i jak przyniosło im to korzyści.

redBus

redBus obsługuje i serwuje inny kod w wersjach na urządzenia mobilne i komputery. Po wdrożeniu zapytań kontenerowych na stronach Things-to-do i cargo firma mogła scalić ten kod w jedną bazę kodu dla tych witryn. Dzięki temu są one responsywne i oszczędzają czas poświęcany na rozwój. Poniższy przykład pokazuje to na przykładzie strony ładunku:

Kod

W tym przykładzie .bpdpCardWrapper jest kontenerem nadrzędnym o nazwie bpdpSection.

Jeśli kontener bpdpSection ma minimalną szerokość 744 pikseli, wartości font-size i line-height 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

Tokopedia

Strony ze szczegółami produktów (PDP) w Tokopedia zawierają wiele kart z informacjami o sklepie i produkcie. Wcześniej układ tej strony był podzielony na 3 kolumny, a czasami nazwa produktu po lewej stronie była przycinana na mniejszych rozmiarach ekranu (patrz film „Wcześniej”).

Aby rozwiązać ten problem z układem, zespół szybko i łatwo wdrożył zapytania dotyczące kontenera. Po wdrożeniu tej funkcji firma mogła korzystać z elastycznego układu, w którym nazwa produktu była zawsze w pełni widoczna (patrz film „Po” poniżej).

Przed

Po

Kod

Podany niżej kod wysyła zapytanie o rozmiar kontenera nadrzędnego o nazwie infowrapper. Jeśli maksymalna szerokość infowrapper wynosi 360 pikseli, komponenty podrzędne width, margin, i padding zostaną dopasowane.

Ustawienie container-type na inline-size wysyła zapytanie o rozmiar kierunku w dokumencie elementu nadrzędnego. W przypadku języków łacińskich, takich jak angielski, będzie to szerokość nadrzędnego kontenera, ponieważ tekst jest wyrównany do lewej.

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 wielokropek tekstu, aby znaleźć swój przypadek użycia. Wskazano kontenery, które mogą być za małe, przez co treści są przycinane dla użytkownika.

Innym przydatnym zastosowaniem zapytań dotyczących kontenerów w przypadku witryn e-commerce jest sprawdzanie, czy nie ma w nich ponownie użytych komponentów. Na przykład przycisk Dodaj do koszyka może być wyświetlany inaczej w zależności od nadrzędnego kontenera (np. tylko ikona, jeśli znajduje się na karcie produktu, oraz ikona z tekstem, jeśli jest to główny przycisk wezwania do działania na stronie). Przycisk może być dobrym kandydatem na zapytanie dotyczące kontenera.

Możesz stopniowo ulepszać swoją witrynę. Możesz na przykład zacząć od mniejszych przypadków użycia, takich jak przykład elipsy z Tokopedia, i wdrożyć tam zapytania dotyczące kontenera. Następnie stopniowo znajduj więcej przypadków i ulepszaj usługę porównywania cen.

Zasoby:

• Zapytania dotyczące kontenerów trafiają do stabilnych przeglądarek
• Zapytania dotyczące kontenera – projektowanie w przeglądarce
• Przykłady zapytań dotyczących kontenerów
• Przykład: karty zapytań dotyczące kontenera
• Wideo: co nowego w interfejsie internetowym – I/O 2023
• Czy chcesz zgłosić błąd lub poprosić o dodanie funkcji? Chcemy poznać Twoją opinię.

Zapoznaj się z innymi artykułami z tej serii, aby dowiedzieć się, jak firmy e-commerce korzystały z nowych funkcji CSS i interfejsu, takich jak animacje sterowane przewijaniem, wyskakujące okienka, zapytania kontenera i selektor has().

• Dlaczego funkcje interfejsu internetowego są ważne w przypadku witryny e-commerce?
• Studia przypadków animacji uruchamianych przez przewijanie
• Zobacz studia przypadków dotyczące Transitions
• Popover – studia przypadków
• :has() – przykłady zastosowania selektora