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

Kontenery są w modzie! W te Walentynki zapytania dotyczące rozmiarów i jednostek zapytań kontenerów działają na stabilnym poziomie we wszystkich nowoczesnych przeglądarkach.

Za pomocą zapytań dotyczących kontenera możesz wysyłać zapytania o informacje dotyczące stylów elementu nadrzędnego, takie jak inline-size. Zapytania o media umożliwiają wysyłanie zapytań o rozmiar widocznego obszaru, natomiast 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. Na przykład możesz włączyć komponent karty, który może być wyświetlany w jeden sposób na pasku bocznym, a w innej konfiguracji w siatce produktów.

Używanie zapytań dotyczących kontenerów

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

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

Ustawienie container-type na inline-size wysyła zapytanie o rozmiar elementu nadrzędnego w kierunku inline. W przypadku języków łacińskich, takich jak angielski, będzie to szerokość karty, ponieważ tekst jest wyświetlany od lewej do prawej.

Teraz możesz użyć tego kontenera, aby zastosować style do dowolnego z jego elementów potomnych, używając @container:

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

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

Dodatkowo możesz używać wartości jednostek długości zapytania kontenera w taki sam sposób jak wartości jednostek opartych na widoku. Różnica polega na tym, że jednostki kontenera odpowiadają kontenerowi, a nie widocznemu obszarowi. Ten przykład pokazuje typografię dostosowaną do urządzenia, która korzysta z jednostek zapytania kontenera i funkcji clamp() do określania minimalnego i maksymalnego rozmiaru:

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

Wartość 15cqi powyżej odnosi się do 15% rozmiaru wstawianego kontenera. Funkcja clamp() przypisuje minimalną wartość 2 rem do 4 rem. Jeśli 15cqi znajduje się między tymi wartościami, tekst będzie odpowiednio się powiększać i kurczyć.

Zapytanie o kontener Walentynki

Z okazji Walentynek przygotowaliśmy dla Was walentynkę, którą możecie obejrzeć niezależnie od tego, w jakiej stabilnej przeglądarce (najnowszej wersji) wyświetlacie tę stronę.