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 kontenera używają reguły at @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ą nowej wersji domyślnej.

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 makroschematów, zapytania dotyczące kontenera w przypadku mikroschemató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.

Ten artykuł należy do serii, w której omawiamy, jak firmy zajmujące się e-handlem ulepszają swoje witryny za pomocą nowych funkcji CSS i interfejsu użytkownika. 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. W tym przykładzie pokazujemy to na stronie ł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 ekranach (zobacz 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 warto wziąć pod uwagę podczas korzystania z zapytań dotyczących kontenera

Tokopedia znalazła zastosowanie, szukając w swojej witrynie wielokropka tekstowego. 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
• Prezentacja: 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? Chętnie poznamy 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 użytkownika w witrynie internetowej są ważne dla Twojej witryny e-commerce?
• Studia przypadków animacji uruchamianych przez przewijanie
• Zobacz studia przypadków dotyczące Transitions
• Studia przypadków dotyczących wyskakujących okienek
• :has() – przykłady zastosowania selektora