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.

Dobre wieści – jedna z najczęściej poszukiwanych funkcji dla programistów jest dostępna w przeglądarkach. Od Chromium 105 i Safari 16 można teraz tworzyć zapytania kontenera na podstawie rozmiaru i używać w tych przeglądarkach wartości jednostek zapytań kontenerów. Aby jeszcze bardziej ułatwić korzystanie z zapytań o kontenery oparte na rozmiarze i jednostek cq, zespół Aurora w Chrome ciężko pracował nad aktualizacją Container Query Polyfill pod kątem obsługi większej liczby przeglądarek i przypadków użycia, dzięki czemu użytkownik może bez obaw korzystać z tej zaawansowanej funkcji już dziś.

Czym są zapytania dotyczące kontenerów?

Zapytania o kontenery to funkcja CSS, która umożliwia opisanie logiki stylu, która kieruje reklamy do cech elementu nadrzędnego i określa jego styl elementów podrzędnych. Elastyczne projektowanie witryn oparte na komponentach pozwala utworzyć zapytanie o rozmiar elementu nadrzędnego. To znacznie bardziej szczegółowe i przydatne informacje niż np. zapytania o multimedia, które dostarczają tylko informacji o rozmiarze widocznego obszaru.

Za pomocą zapytań dotyczących kontenerów możesz tworzyć komponenty wielokrotnego użytku, które mogą się wyświetlać w różny sposób w zależności od tego, gdzie się znajdują na stronie. Dzięki temu są one znacznie bardziej odporne i elastyczniejsze w odniesieniu do różnych stron i szablonów.

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ć powłokę na element nadrzędny, który chcesz śledzić. Aby to zrobić, ustaw właściwość container-type lub użyj skrótu container, aby ustawić jednocześnie typ i nazwę kontenera.

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

Teraz możesz używać reguły @container, aby ustawiać style na podstawie najbliższego elementu nadrzędnego. W przypadku projektu jak na ilustracji powyżej, w którym karta może przechodzić z jednej kolumny do dwóch, napisz coś takiego:

@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 zachować przejrzystość, 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 zapytania dotyczącego kontenera

Aby jeszcze bardziej zwiększyć przydatność zapytań dotyczących kontenerów, możesz też używać wartości jednostek opartych na kontenerach. Poniższa tabela przedstawia możliwe wartości jednostek kontenera i ich związek z rozmiarem kontenera:

Jednym z przykładów 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 spowoduje, że rozmiar czcionki będzie wynosił 15% zawartości kontenera, czyli powiększy się wraz ze wzrostem rozmiaru tekstu (szerokość) lub zmniejszy się, gdy się zmniejszy. Aby posunąć się jeszcze dalej, użyj funkcji clamp(), która przypisze typografii minimalny i maksymalny limit rozmiaru oraz dostosuj jej rozmiar na podstawie rozmiaru kontenera:

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

Teraz nagłówek nigdy nie powiększy się o 3rem ani nie spadnie poniżej .5rem, ale zajmie 15% powierzchni elementu wbudowanego w kontener w dowolnym miejscu.

Ta prezentacja idzie o krok dalej i aktualizuje szersze karty, aby miały mniejszy zakres rozmiarów, ponieważ są wyświetlane w widoku 2 kolumn.

Polyfill zapytania kontenera

Zapytania kontenera to niezwykle zaawansowana funkcja, dlatego chcemy, by użytkownicy mogli bez obaw włączać je w swoje projekty. Pamiętaj też, że w dużej mierze zależy obsługa przeglądarek. W związku z tym pracujemy nad ulepszeniem kodu Polyfill zapytań dotyczących kontenerów. Ten kod polyfill jest ogólnie obsługiwany w tych krajach:

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

Po skompresowaniu ma rozmiar mniejszy niż 9 KB i wykorzystuje funkcję ResizeObserver z funkcją MutationObserver, aby obsługiwać pełną składnię zapytań @container, która obecnie jest dostępna w stabilnych przeglądarkach:

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

Korzystanie z kodu polyfill zapytania dotyczącego kontenera

Aby użyć kodu polyfill, dodaj do nagłówka dokumentu następujący 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, aby warunkowo dostarczać kod polyfill na podstawie atrybutu User-Agent, lub hostować go we własnym źródle.

Dla wygody użytkowników zalecamy, by początkowo używać kodu polyfill tylko do wyświetlania treści w części strony widocznej po przewinięciu, a zapytania @supports tymczasowo zastąpić go wskaźnikiem wczytywania do czasu, aż kod polyfill 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ń oraz urządzeń natywnie obsługujących zapytania dotyczące kontenerów ten wskaźnik wczytywania nigdy się nie wyświetla.

Nowe funkcje Polyfill

Zaktualizowany kod polyfill obsługuje:

• Zagnieżdżone reguły @container.
• Obsługiwane jest umieszczanie reguł @container w zapytaniach @supports i @media oraz na odwrót.
• Warunkowy kod CSS, taki jak @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 w miejscach, w których ich składnia jest poprawna).
• Pionowe tryby pisania (pionowe).
• Jednostki względne (cqw, cqh itp.) w kontenerze są obsługiwane w warunkach zapytania, deklaracjach właściwości i klatkach kluczowych animacji. Wartości rem i em są obsługiwane w warunkach zapytania.
• Rozwinięta składnia zapytań kontenera:
  • Składnia zakresu (np. (200px < width < 400px)).
  • Zapytania równościowe (np. (width = 200px)).
• Pseudonimizowane elementy, np. ::before i ::after.
• Przeglądarki bez :is(...)/:where(...) są obsługiwane w opcjonalnym obejściu
• Zapytania dotyczące funkcji orientation i aspect-ratio.
• prawidłowe filtrowanie zapytań na podstawie funkcji (np. wysyłanie zapytań height na stronie container: inline-size jest prawidłowo niedozwolone w trybie pisania poziomego).
• mutacja DOM (np. elementy <style> i <link> są usuwane w czasie działania);

Ograniczenia i ostrzeżenia dotyczące Polyfill

Jeśli używasz kodu polyfill zapytania w kontenerze, musisz zwrócić uwagę na kilka funkcji:

• Interfejs Shadow DOM nie jest jeszcze obsługiwany.
• Jednostki względne w kontenerze (np. cqw i cqh) nie są obsługiwane w warunkach zapytania @media.
  • Safari: jednostki względne w kontenerze nie są obsługiwane w klatkach kluczowych animacji starszych niż 15.4.
• Funkcje calc(), min(), max() i inne funkcje matematyczne nie są jeszcze obsługiwane w warunkach zapytania.
• Kod polyfill działa tylko z kodami CSS umieszczonymi w treści i z tego samego pochodzenia. Arkusze stylów z innych źródeł i arkusze stylów w elementach iframe (chyba że kod polyfill został wczytany ręcznie) nie są obsługiwane.
• Mikrofon layout i style wymaga obsługi bazowej przeglądarki:
  • Safari 15.4 lub nowsza
  • Firefox obecnie nie obsługuje ograniczania stylów, ale pracujemy nad tym.

Ostrzeżenia

• Aby uchronić się przed wpływem FID i CLS, kod polyfill nie gwarantuje, kiedy pojawi się pierwszy układ, nawet jeśli jest on ładowany synchronicznie. Wyjątkiem jest sytuacja, gdy celem jest uniknięcie bezzasadnego opóźnienia LCP. Innymi słowy, nie należy polegać na nim przy pierwszym wyrenderowaniu.
• Generuje ResizeObserver Loop Errors. Pierwotny kod polyfill również spełnia to zadanie, ale warto o tym wspomnieć. Dzieje się tak, ponieważ rozmiar bloku elementu container-type: inline-size prawdopodobnie zmieni się po ocenie zapytania, ale ResizeObserver nie jest w stanie poinformować, że nie interesują nas zmiany tego rozmiaru.
• To kod polyfill został przetestowany w ramach testów platformy internetowej i uzyskał 70% pozytywnego wyniku, ponieważ niektóre funkcje, takie jak interfejsy API JavaScript, nie są wypełnione kodem Polyfill, dlatego współczynnik przejścia celowo jest bliski 70%.
• Obejście :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