Zapytania dotyczące kontenerów i :has() to dopasowanie dostępne w elastycznym niebie. Na szczęście obie te funkcje pojawią się razem w Chromium 105. Nowa wersja oferująca 2 popularne funkcje związane z interfejsami elastycznymi.
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 jest właścicielem swojej elastycznej logiki stylu. 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 kontenerów
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óra 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 wysyła zapytanie o rozmiar elementu nadrzędnego w kierunku inline. W językach łacińskich, takich jak angielski, jest to szerokość karty, ponieważ tekst biegnie w tekście 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 programistom 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. Możesz użyć tego do nadania stylu akapitowi nadrzędnemu lub dowolnemu elementowi w tym akapicie. 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 kontenera i :has()
Możesz połączyć możliwości selekcji nadrzędnych funkcji :has() z możliwościami zapytań nadrzędnych funkcji zapytań kontenera, aby tworzyć naprawdę dynamiczne style wewnętrzne.
Rozwińmy pierwszy przykład, czyli kartę rakiety. Co zrobić, jeśli masz kartę bez obrazu? Możesz zwiększyć rozmiar tytułu i dostosować układ siatki do jednej kolumny, aby bez grafiki wyglądała lepiej.
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. Kolejna przejrzysta funkcja CSS to :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ć :has() i :not(), na przykład w ten sposób:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
W powyższym kodzie definiujesz selektor, który nadaje styl elementowi h1 w 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. Te 2 funkcje są dostępne w Chromium 105 i powoli zyskują obsługę w różnych przeglądarkach. To ekscytujący czas dla programistów interfejsu użytkownika.