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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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.

Obsługa przeglądarek

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110
  • Safari: 16.

Źródło

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.

Obraz pokazujący, jak współdziałają różne typy stylów.
web.dev—The New Responsive.

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

Przed (podstawa wielu kodów) Po (pojedyncza baza kodu)
Infrastruktura Oddzielna infrastruktura (wysokie koszty). Ta sama infrastruktura (niższy koszt).
Projektowanie Oddzielny interfejs, ale słaba spójność. Trudne do rozwiązania, ale możliwe.
Wyniki Jest łatwa w obsłudze, ponieważ jest oddzielnym systemem, ale powiela wysiłek w celu poprawy wydajności. Wynik dotyczy strony i funkcji, ale wynik PageSpeedInsights redBus wynosi powyżej 80.
Programowanie Oddzielne zespoły programistów. Skrócenie czasu o 30–40%.

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

Przed wdrożeniem zapytań dotyczących kontenerów słowa „ISKU 10 in 1 Obeng” nasycono.. w lewym górnym rogu są przycięte na mniejszych ekranach.

Po

Implementacja zapytań dotyczących kontenerów dostosowuje układ, utrzymując tekst w widocznym obszarze.

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:

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().