Zapytania dotyczące kontenerów zaczynają trafiać do stabilnych przeglądarek, a polyfill uzyskuje dużą aktualizację

Una Kravets

Gerald Monaco

Zapytania dotyczące kontenerów są już dostępne

Świetna wiadomość – jedna z najczęściej zgłaszanych funkcji dla programistów pojawia się w przeglądarkach. Począwszy od Chromium 105 i Safari 16 w tych przeglądarkach możesz tworzyć zapytania dotyczące kontenerów i używać wartości jednostek zapytań kontenera. Aby jeszcze bardziej ułatwić korzystanie z zapytań kontenera na podstawie rozmiaru i jednostek cq, zespół Aurora w Chrome ciężko pracował nad aktualizacją wypełniania zapytań kontenera, aby obsługiwał więcej przeglądarek i użytecznych scenariuszy. Dzięki temu możesz już teraz korzystać z tej zaawansowanej funkcji.

Czym są zapytania dotyczące kontenerów?

Zapytania o kontener to funkcja CSS, która umożliwia tworzenie logiki stylizacji, która kieruje się właściwościami elementu nadrzędnego, aby nadać styl elementom podrzędnym. Możesz naprawdę elastycznie projektować projekt oparty na komponentach, wysyłając zapytania o rozmiar elementu nadrzędnego. Są one znacznie bardziej szczegółowe i przydatne niż zapytania o media, które zawierają tylko informacje o rozmiarze widocznego obszaru.

Dzięki zapytaniom o kontenery możesz pisać komponenty wielokrotnego użytku, które mogą wyglądać inaczej w zależności od miejsca na stronie, w którym się znajdują. Dzięki temu są one dużo bardziej odporne i elastyczne na różnych stronach i w różnych szablonach.

Korzystanie z zapytań dotyczących kontenera

Załóżmy, że masz kod HTML:

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

Aby użyć zapytania dotyczącego kontenera, musisz najpierw ustawić ograniczenie dla elementu nadrzędnego, który chcesz śledzić. Aby to zrobić, ustaw właściwość container-type lub użyj skrótu container, aby ustawić typ i nazwę kontenera jednocześnie.

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

Teraz możesz użyć reguły @container, aby ustawić style na podstawie najbliższego elementu nadrzędnego. W projekcie takim jak na obrazku powyżej, w którym karta mogłaby przechodzić z jednej kolumny do dwóch, wpisz:

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

Aby uporządkować i uściśliwić kod, nadaj kontenerowi elementu nadrzędnego nazwę:

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

Następnie przepisz poprzedni kod jako:

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

Jednostki zapytań kontenera

Aby zapytania dotyczące kontenerów były jeszcze bardziej przydatne, możesz też stosować wartości jednostek oparte na kontenerach. W tabeli poniżej znajdziesz możliwe wartości jednostek kontenera i ich odpowiadające rozmiary kontenera:

Przykładem wykorzystania jednostek opartych na kontenerach jest elastyczna typografia. Jednostek opartych na widoku (takich jak vh, vb, vw i vi) można używać do określania rozmiaru dowolnego elementu na ekranie.

.card h2 {
  font-size: 15cqi;
}

Ten kod spowoduje, że rozmiar czcionki będzie wynosił 15% rozmiaru wbudowanego kontenera, co oznacza, że będzie się on zwiększać wraz ze wzrostem rozmiaru wbudowanego (szerokości) lub zmniejszać wraz ze spadkiem. Aby pójść o krok dalej, użyj funkcji clamp(), aby określić minimalny i maksymalny limit rozmiaru typografii oraz dostosować jej rozmiar na podstawie rozmiaru kontenera:

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

Teraz nagłówek nigdy nie będzie większy niż 3rem ani mniejszy niż .5rem, ale zajmie 15% rozmiaru wbudowanego kontenera w dowolnym miejscu.

Ta wersja demonstracyjna idzie o krok dalej i aktualizuje szersze karty, aby miały mniejszy zakres rozmiarów (jak w widoku 2-kolumnowym).

Kod polyfill zapytań kontenera

Zapytania dotyczące kontenerów są bardzo przydatną funkcją, dlatego chcemy, aby użytkownicy czuli się w stanie uwzględniać je w swoich projektach i to, że obsługa przeglądarek jest dla nich niezwykle ważna. Dlatego pracowaliśmy nad ulepszeniem wypełniania zapytań do kontenera. Ten kod polyfill ma ogólną pomoc w zakresie:

• Firefox w wersji 69 lub nowszej,
• Chrome 79 lub nowsze,
• Edge 79 lub nowszy
• Safari w wersji 13.4 lub nowszej

Po skompresowaniu jego rozmiar nie przekracza 9 KB i wykorzystuje funkcję ResizeObserver z funkcją MutationObserver do obsługi pełnej składni zapytań @container, która jest obecnie dostępna w stabilnych przeglądarkach:

• Zapytania dyskretne (width: 300px i min-width: 300px).
• Zapytania dotyczące zakresu (200px < width < 400px i width < 400px).
• Jednostki względnej długości kontenera (cqw, cqh, cqi, cqb, cqmin i cqmax) we właściwościach i klatkach kluczowych.

Korzystanie z polyfilla zapytania dotyczącego kontenera

Aby korzystać z polyfill, dodaj ten tag skryptu do nagłówka dokumentu:

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

Możesz też użyć usługi do warunkowego dostarczania polyfilla na podstawie User-Agent lub hostować go samodzielnie na własnym serwerze.

Aby zapewnić użytkownikom jak najlepsze wrażenia, zalecamy, aby początkowo używać polyfilla tylko do treści poniżej zagięcia, a zapytania @supports do tymczasowego zastępowania go wskaźnikiem wczytywania, dopóki polyfill nie będzie gotowy do wyświetlenia:

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

W przypadku odpowiednio szybkich sieci i urządzeń lub urządzeń, które natywnie obsługują zapytania dotyczące kontenerów, ten wskaźnik ładowania nigdy nie będzie wyświetlany.

Nowe funkcje w wypełnianiu dynamicznych formularzy

Zaktualizowany kod polyfill obsługuje:

• zagnieżdżone reguły @container,
• Obsługiwane jest zagnieżdżanie reguł @container w zapytaniach @supports i @media oraz odwrotnie.
• Warunkowy kod CSS, np. @supports (container-type: inline-size), zostanie przekazany po wczytaniu kodu polyfill.
• Pełna obsługa składni CSS (nie ma już problemu z umieszczaniem komentarzy w dowolnym miejscu, jeśli są one poprawne pod względem składni).
• Pionowe tryby pisania (przez tryb pisania).
• Jednostki względne kontenera (cqw, cqh itp.) są obsługiwane w warunkach zapytania, deklaracjach właściwości i klatkach kluczowych animacji. W warunkach zapytań są obsługiwane operatory rem i em.
• Składnia zapytania dotyczącego rozszerzonego kontenera:
  • Składnia zakresu (np. (200px < width < 400px)).
  • zapytania o równość (np. (width = 200px)).
• Elementy pseudo takie jak ::before i ::after.
• Przeglądarki bez :is(...)/:where(...) są obsługiwane przez opcjonalne obejście
• Zapytania o funkcję orientation i aspect-ratio.
• Prawidłowe filtrowanie zapytań na podstawie funkcji (np. wysyłanie zapytań dotyczących funkcji height w polu container: inline-size jest poprawnie niedozwolone w trybie pisania poziomego).
• mutacji DOM (np. usuwanie elementów <style> i <link> w czasie wykonywania kodu).

Ograniczenia i ostrzeżenia związane z kodem Polyfill

Jeśli używasz kodu polyfill zapytań kontenera, musisz zwrócić uwagę na kilka brakujących funkcji:

• Shadow DOM nie jest jeszcze obsługiwany.
• Jednostki względne kontenera (np. cqw i cqh) nie są obsługiwane w warunkach zapytania @media.
  • Safari: jednostki względne kontenera nie są obsługiwane w klatkach kluczowych animacji starszych niż 15.4.
• calc(), min(), max() ani inne funkcje matematyczne nie są jeszcze obsługiwane w warunkach zapytania.
• Ten kod polyfill działa tylko w przypadku kodu CSS wbudowanego i pochodzącego z tej samej domeny. Nie są obsługiwane skrypty stylów w wielu domenach ani skrypty stylów w elementach iframe (chyba że polyfill jest ładowany ręcznie).
• Ograniczenie layout i style wymaga podstawowej obsługi przeglądarki:
  • Safari w wersji 15.4 lub nowszej
  • Firefox nie obsługuje obecnie ograniczania stylów, ale pracujemy nad tym.

Ostrzeżenia

• Aby zapobiec oddziaływaniu na FID i CLS, kod polyfill nie gwarantuje, kiedy pojawi się pierwszy układ, nawet jeśli jest ładowany synchronicznie. Wyjątkiem są próby uniknięcia nieuzasadnionego opóźnienia LCP. Inaczej mówiąc, nigdy nie należy polegać na nim przy pierwszym malowaniu.
• Generuje ResizeObserver Loop Errors. Tak samo działa pierwotna wersja polyfill, ale warto o tym wspomnieć. Dzieje się tak, ponieważ rozmiar bloku container-type: inline-size prawdopodobnie zmieni się po ocenie zapytania, ale ResizeObserver nie ma możliwości poinformowania o tym, że nie interesują nas zmiany rozmiaru bloku.
• Ten kod polyfill jest testowany w ramach testów platformy Web Platform i uzyskał 70% zaliczenia, ponieważ niektóre funkcje, takie jak interfejsy API JavaScript nie są wypełniane, więc współczynnik zdania celowo zbliżył się do 70%.
• :where() Obejście jest wymagane w przypadku 2,23% użytkowników przeglądarek starszych niż:
  • Safari 14
  • Chromium 88
  • Edge 88
  • Samsung Internet 15
  • Firefox 78