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

W te Walentynki obchodzimy święto zapytań dotyczących rozmiarów i jednostek zapytań kontenerów użytkowników we wszystkich stabilnych przeglądarkach.

Kontener zapytania „miłość” wisi w powietrzu. W te Walentynki zapytania dotyczące kontenerów i jednostek zapytań kontenera nie zmieniają się we wszystkich nowoczesnych przeglądarkach.

Obsługa przeglądarek

  • 105
  • 105
  • 110
  • 16

Źródło

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

Zapytania o multimedia a zapytania kontenera.

Zapytania dotyczące kontenerów są szczególnie przydatne w przypadku elastycznego projektowania stron i komponentów wielokrotnego użytku. Umożliwia na przykład włączenie komponentu karty, który można ułożyć w jeden sposób na pasku bocznym, a w innej konfiguracji w siatce produktów.

Używaj zapytań dotyczących kontenerów

Aby korzystać z zapytań dotyczących kontenerów, najpierw ustaw izolację elementu nadrzędnego. Aby to zrobić, ustaw właściwość 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 dla container-type wartości inline-size wysyła zapytania o rozmiar elementu nadrzędnego w kierunku bezpośrednim. W przypadku języków łacińskich, takich jak angielski, będzie to szerokość karty, ponieważ tekst układa się w tekście od lewej do prawej.

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

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

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

Poza tym wartości jednostek długości zapytania w kontenerze możesz używać w taki sam sposób jak wartości jednostek zależnych od widocznego obszaru. Różnica polega na tym, że jednostki kontenerów odpowiadają kontenerowi, a nie widocznym obszarowi. W tym przykładzie pokazano elastyczną typografię z użyciem jednostek zapytań w kontenerach i funkcji clamp() w celu określenia minimalnej i maksymalnej wartości rozmiaru:

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

Wartość 15cqi powyżej odnosi się do 15% rozmiaru wbudowanego kontenera. Funkcja clamp() zwraca wartość minimalną wynoszącą 2–4 m. W międzyczasie, jeśli między tymi wartościami mieści się 15cqi, tekst odpowiednio się zmniejszy i powiększy.

Zapytanie o kontener w stylu Walentynki

Z okazji święta stworzyliśmy walentynkę dla wszystkich, niezależnie od tego, jaka (najnowsza wersja) przeglądarka stabilna korzysta z takiej funkcji.