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. Funkcja ta działa 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 makrolayoutów, zapytania dotyczące kontenera w przypadku mikrolayoutów oraz zapytania dotyczące multimediów na podstawie preferencji użytkownika, aby stworzyć wydajny system responsywnego projektowania. 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 przekazuje inny kod w wersjach mobilnej i komputerowej. 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 programowania. 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ą 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 przycinana na mniejszych ekranach (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 udało się uzyskać elastyczny układ, 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 wstawki elementu nadrzędnego. W przypadku języków łacińskich, takich jak polski, 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 wielokropków w tekście. 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 tam zaimplementować 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: nowości 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, pop-upy, zapytania dotyczące kontenera i selektor has().

• Dlaczego funkcje interfejsu użytkownika w witrynie internetowej są ważne dla Twojej witryny e-commerce?
• Studia przypadków dotyczących animacji uruchamianych przez przewijanie
• Zobacz studia przypadków dotyczące Transitions
• Studia przypadków dotyczących wyskakujących okienek
• :has() – przykłady użycia selektora