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.
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 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.
Korzystanie z 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.