Ta strona została przetłumaczona przez Cloud Translation API.

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ść—w przeglądarkach pojawiła się jedna z najpopularniejszych funkcji dla programistów. 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ń dotyczących kontenerów i jednostek cq, zespół Aurora w Chrome ciężko pracował nad aktualizacją kodu Polyfill w celu obsługi większej liczby przeglądarek i przypadków użycia, dzięki czemu możesz bez obaw korzystać z tej zaawansowanej funkcji już dziś.

Czym są zapytania dotyczące kontenerów?

Zapytania dotyczące kontenerów to funkcja CSS, która umożliwia napisanie logiki stylu określającej cechy elementu nadrzędnego w celu określenia stylu jego elementów podrzędnych. Możesz naprawdę elastycznie projektować projekt oparty na komponentach, wysyłając zapytanie 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.

ALT_TEXT_HERE

Dzięki kwerendom kontenerów możesz tworzyć komponenty wielokrotnego użytku, które mogą wyglądać różnie w zależności od lokalizacji na stronie. 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 kontenerów

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ć. Możesz to zrobić, ustawiając właściwość container-type lub używając 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 nazwa była schludna i wyraźna, 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ń dotyczących kontenerów

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 związek z rozmiarem kontenera:

Jednostka	w odniesieniu do
`cqw`	1% szerokości kontenera zapytania
`cqh`	1% wysokości kontenera zapytania
`cqi`	1% rozmiaru wbudowanego kontenera zapytania
`cqb`	1% rozmiaru bloku kontenera zapytania
`cqmin`	Mniejsza wartość w cqi lub cqb.
`cqmax`	większą wartość w CQi lub CQB,

Przykładem wykorzystania jednostek opartych na kontenerach jest elastyczna typografia. Jednostki oparte na widocznym obszarze (np. vh, vb, vw i vi) mogą służyć do określania rozmiaru dowolnego elementu na ekranie.

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

Ten kod powoduje zwiększenie lub zmniejszenie czcionki o 15% rozmiaru wbudowanego kontenera. Aby pójść o krok dalej, użyj funkcji clamp(), aby określić minimalny i maksymalny limit rozmiaru Twojej 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ą niezwykle 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 pracujemy nad ulepszeniem kodu Polyfill w kontenerze. Ten kod polyfill jest ogólnie pomocny w tych obszarach:

Firefox w wersji 69 lub nowszej,
Chrome w wersji 79 lub nowszej,
Edge w wersji 79 lub nowszej.
Safari 13.4 i nowsze

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 zakresów (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 kodu polyfill zapytań kontenera

Aby używać kodu polyfill, dodaj do nagłówka dokumentu ten tag skryptu:

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

Możesz też skorzystać z usługi, która warunkowo dostarcza kod polyfill na podstawie User-Agent, lub hostuj go samodzielnie we własnym źródle.

Ze względu na wygodę użytkowników zalecamy, aby początkowo używać kodu polyfill tylko w części strony widocznej po przewinięciu, a zapytania @supports tymczasowo zastępować 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 wystarczająco 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 Polyfill

Zaktualizowany kod polyfill obsługuje:

Zagnieżdżone reguły @container.
Reguły @container można zagnieżdżać w zapytaniach @supports i @media (i 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ż problemów z umieszczaniem komentarzy wszędzie tam, gdzie 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. Warunki zapytania obsługują rem i em.
Rozszerzona składnia zapytania dotyczącego kontenera:
- Składnia zakresu (np. (200px < width < 400px)).
- Zapytania dotyczące równości (np. (width = 200px)).
Pseudoelementy, 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).
Mutacja DOM (np. elementy <style> i <link> są usuwane w czasie działania).

Uwaga: zaktualizowany kod polyfill zapytań o kontener nie obsługuje już nieaktualnej składni zapytań dotyczącej rozmiaru, w której użytkownik musi opakowywać zapytania dotyczące rozmiaru w tabeli size() (np. size(width >= 200px)).

Ograniczenia i ostrzeżenia związane z kodem Polyfill

Jeśli używasz kodu polyfill zapytań kontenera, musisz uważać na kilka funkcji:

Model Shadow DOM nie jest jeszcze obsługiwany.
Jednostki względne kontenera (na przykład 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. Arkusze stylów i arkusze stylów w elementach iframe z różnych źródeł (chyba że kod polyfill został wczytany ręcznie) nie są obsługiwane.
Ograniczenie layout i style wymaga podstawowej obsługi przeglądarki:
- Safari 15.4 i nowsze
- Firefox obecnie nie obsługuje ograniczania stylów, ale już nad tym pracujemy.

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, nie należy polegać na nim przy pierwszym wyrenderowaniu.
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, że zmiany rozmiaru bloku są dla nas nieistotne.
Ten kod polyfill jest testowany w ramach Testów platformy internetowej i uzyskał 70% zaliczenia, ponieważ niektóre funkcje, takie jak interfejsy API JavaScript nie są wypełniane, więc wskaźnik zdania celowo zbliża się do 70%.
Rozwiązanie :where() jest wymagane w przypadku 2,23% użytkowników przeglądarek starszych niż:
- Safari 14.
- Chromium 88
- Edge 88
- Samsung Internet 15
- Firefox 78