Zapytania dotyczące kontenera i funkcja :has() to połączenie idealne dla responsywnych stron internetowych. Na szczęście obie te funkcje pojawią się razem w Chromium 105. To ogromna aktualizacja zawierająca 2 funkcje, o które proszono nas bardzo często.
Zapytania dotyczące kontenera: krótkie podsumowanie
Zapytania dotyczące kontenera umożliwiają deweloperom wysyłanie zapytań do selektora nadrzędnego w celu uzyskania informacji o jego rozmiarze i stylu. Dzięki temu element podrzędny może mieć własną logikę stylizacji w wersji responsywnej, niezależnie od tego, gdzie znajduje się na stronie internetowej.
Zamiast polegać na widocznym obszarze przy określaniu stylu (np. o dostępnej przestrzeni), deweloperzy mogą teraz wysyłać zapytania o rozmiar elementów na stronie. Ta funkcja oznacza, że komponent ma własną logikę stylizacji w ramach strony responsywnej. Dzięki temu komponent jest znacznie bardziej odporny, ponieważ logika stylizacji jest do niego dołączona niezależnie od tego, gdzie się pojawia na stronie.
Korzystanie z zapytań dotyczących kontenera
Aby tworzyć zapytania dotyczące kontenerów, musisz najpierw ustawić ograniczenie w elemencie nadrzędnym. Aby to zrobić, ustaw wartość container-type w kontenerze nadrzędnym. Możesz mieć kartę z obrazem i tekstem, który wygląda tak:
Aby utworzyć zapytanie kontenera, ustaw container-type w kontenerze karty:
.card-container {
container-type: inline-size;
}
Ustawienie container-type na inline-size powoduje zapytanie o rozmiar wewnętrznego kierunku do elementu nadrzędnego. 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żemy użyć tego kontenera do zastosowania stylów do dowolnego z jego elementów potomnych za pomocą @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Selektor nadrzędny :has()
Pseudoklasa CSS :has() umożliwia deweloperom sprawdzenie, czy element nadrzędny zawiera elementy podrzędne z określonymi parametrami.
Na przykład p:has(span) wskazuje selektor akapitu (p), który zawiera element span. Korzystając z tego atrybutu, możesz stylizować treść akapitu nadrzędnego lub dowolne treści w nim. Przykładem przydatnego zastosowania jest użycie elementu figure:has(figcaption) do nadania stylu elementowi figure zawierającego podpis. Więcej informacji o :has() znajdziesz w tym artykule Jhey Tompkins.
Zapytania dotyczące kontenerów i :has()
Możesz połączyć nadrzędne możliwości wyboru elementu :has() z nadrzędnymi możliwościami zapytań dotyczących kontenerów, aby utworzyć naprawdę dynamiczne style wbudowane.
Rozwińmy pierwszy przykład, czyli kartę rakiety. Co zrobić, jeśli masz kartę bez obrazu? Możesz zwiększyć rozmiar tytułu i zmienić układ siatki na pojedynczą kolumnę, aby wyglądał lepiej bez obrazu.
W tym przykładzie karta z obrazem ma szablon siatki 2-kolumnowej, a karta bez obrazu ma układ 1-kolumnowy. Dodatkowo karta bez obrazu ma większy nagłówek. Aby napisać to za pomocą :has(), użyj tego kodu CSS.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
Aby zastosować styl z dwoma kolumnami powyżej, poszukaj elementu z klasą visual. Inną przydatną funkcją CSS jest :not(). Jest to część specyfikacji :has(), ale istnieje od dłuższego czasu i ma lepszą obsługę w przeglądarkach. Możesz nawet połączyć elementy :has() i :not() w ten sposób:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
W powyższym kodzie piszesz selektor, który określa styl elementu h1 na karcie, która nie zawiera klasy visual. W ten sposób możesz bardzo wyraźnie dostosować rozmiar czcionki.
Podsumowanie
Powyższe demo pokazuje kombinację atrybutów :has(), :not() i @container, ale zapytania dotyczące kontenera sprawdzają się najlepiej, gdy ten sam element jest używany w kilku miejscach. Dodajmy trochę stylizacji i wyświetlmy te karty w siatce obok siebie.
Teraz możesz zobaczyć prawdziwą moc nowoczesnego CSS. Potrafimy pisać przejrzyste style za pomocą stylów ukierunkowanych, które bazują na logice i tworzą naprawdę solidne komponenty. Ponieważ te 2 potężne funkcje pojawiają się w Chromium 105 i są coraz częściej obsługiwane w różnych przeglądarkach, to niesamowity czas dla programistów UI!