Zapytania dotyczące kontenerów i :has() to dopasowanie dostępne w elastycznym niebie. Na szczęście obie te funkcje działają w Chromium 105. Nowa wersja oferująca 2 popularne funkcje związane z interfejsami elastycznymi.
Zapytania dotyczące kontenerów: krótkie podsumowanie
Zapytania dotyczące kontenerów umożliwiają programistom wysyłanie zapytań o rozmiar i styl elementu nadrzędnego do selektora nadrzędnego. Dzięki temu element podrzędny może wykorzystać logikę elastycznego określania stylu 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. Sprawia to, że komponent jest znacznie bardziej odporny na działanie logiki stylistycznej niezależnie od tego, w którym miejscu na stronie się on znajduje.
Korzystanie z zapytań dotyczących kontenerów
Aby budować za pomocą zapytań dotyczących kontenerów, musisz najpierw ustawić ograniczenie dla elementu nadrzędnego. 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 dotyczące 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 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, aby zastosować style do dowolnego elementu podrzędnego za pomocą @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Selektor elementu nadrzędnego :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) oznacza selektor akapitu (p), w którym znajduje się znak span. Korzystając z tego atrybutu, możesz stylizować treść akapitu nadrzędnego lub dowolne treści w nim. Przydatny przykład to figure:has(figcaption) określający styl elementu figure zawierającego podpis. Więcej informacji na temat :has() znajdziesz w tym artykule napisanym przez Jheya Tompkinsa.
Zapytania dotyczące kontenera 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 dotyczący karty rakiety. A co, jeśli masz kartę bez obrazu? Możesz zwiększyć rozmiar tytułu i dostosować układ siatki do jednej kolumny, aby bez obrazu wyglądał bardziej intencjonalnie.
W tym przykładzie karta z obrazem ma dwukolumnowy szablon siatki, a karta bez obrazu ma układ jednokolumnowy. Dodatkowo karta bez obrazu ma większy nagłówek. Aby napisać kod w języku :has(), użyj poniższego arkusza CSS.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
Szukasz elementu z klasą visual, aby zastosować powyższy styl 2 kolumn. Kolejna przejrzysta funkcja CSS to :not(). Wymagania są takie same jak w przypadku wersji :has(), ale istnieją od dłuższego czasu i zapewniają lepszą obsługę przeglądarek. 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ższa prezentacja pokazuje kombinację parametrów :has(), :not() i @container, ale zapytania dotyczące kontenerów sprawdzają się, gdy ten sam element jest używany w wielu miejscach. Dodajmy nieco stylu i pokażmy te karty w siatce, obok siebie.
Teraz można naprawdę zobaczyć potęgę 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!