Zapytania dotyczące kontenera trafiają do stabilnych przeglądarek

W te Walentynki obchodzimy zapytania dotyczące rozmiarów kontenerów i jednostek zapytań, które będą wyświetlane we wszystkich stabilnych przeglądarkach.

Una Kravets

Zapytanie w kontenerze unosi się w powietrzu! W te Walentynki zapytania dotyczące rozmiarów i jednostek zapytań kontenerów działają stabilnie we wszystkich nowoczesnych przeglądarkach.

Zapytania dotyczące kontenerów umożliwiają wysyłanie zapytań o informacje o stylu elementu nadrzędnego, np. jego elementu inline-size. Zapytania o media pozwalają wysyłać zapytania o rozmiar widocznego obszaru, a zapytania dotyczące kontenerów włączają komponenty, które mogą się zmieniać w zależności od tego, gdzie znajdują się w interfejsie.

Zapytania dotyczące kontenerów przydają się zwłaszcza w przypadku elastycznego projektowania stron i komponentów wielokrotnego użytku. Przykładem może być włączenie komponentu karty, który może się rozkładać w jeden sposób po umieszczeniu na pasku bocznym oraz w innej konfiguracji w siatce usług.

Używanie zapytań dotyczących kontenerów

Aby używać zapytań dotyczących kontenera, najpierw ustaw ograniczenie dla elementu nadrzędnego. Możesz to zrobić, ustawiając wartość container-type w kontenerze nadrzędnym lub używając skrótu container, aby nadać mu jednocześnie typ i nazwę:

.card-container {
  container: card / inline-size;
}

Ustawienie container-type na inline-size powoduje zapytanie o rozmiar wewnętrznego kierunku do elementu nadrzędnego. W językach łacińskich (takich jak angielski) jest to szerokość karty, ponieważ tekst przesuwa się od lewej do prawej.

Teraz możesz użyć tego kontenera, aby zastosować style do dowolnego elementu podrzędnego za pomocą @container:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

Możesz też używać wartości jednostek długości zapytania kontenera w taki sam sposób, jak wartości jednostek uwzględniających widoczny obszar. Różnica polega na tym, że jednostki kontenera odpowiadają kontenerowi, a nie widocznego obszaru. Ten przykład pokazuje elastyczną typografię, korzystając z jednostek zapytań w kontenerach i funkcji clamp(), która podaje minimalną i maksymalną wartość rozmiaru:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

15cqi powyżej odnosi się do 15% rozmiaru wbudowanego kontenera. Funkcja clamp() przypisuje minimalną wartość 2 rem do 4 rem. Jeśli w tym czasie 15cqi znajdzie się między tymi wartościami, tekst zmniejszy się i powiększy odpowiednio.

Zapytanie dotyczące kontenera – walentynka

Z okazji święta uwiecznionego przez zapytanie dotyczące kontenera przygotowaliśmy walentynkę dla wszystkich, bez względu na to, w jakiej (najnowszej wersji) stabilnej przeglądarce ją przeglądasz.