Zapytania dotyczące kontenerów i znaki :has() to dopasowanie realizowane w elastycznym niebie. Na szczęście obie te funkcje są dostępne razem w Chromium 105. To ogromna wersja zawierająca dwie bardzo poszukiwane funkcje elastycznych interfejsów.
Zapytania dotyczące kontenerów: krótkie podsumowanie
Zapytania dotyczące kontenerów umożliwiają programistom wysyłanie do selektora nadrzędnego zapytań dotyczących informacji o rozmiarze i stylu. Dzięki temu element podrzędny może mieć własną logikę stylu elastycznego niezależnie od tego, w którym miejscu strony internetowej się znajduje.
Zamiast używać widocznego obszaru do określania stylu, np. dostępnego miejsca, deweloperzy mają teraz możliwość wysyłania zapytań dotyczących rozmiaru elementów na stronie. Ta możliwość oznacza, że logikę charakterystyczną dla danego komponentu jest elastyczna stylizacja. Dzięki temu komponent jest znacznie bardziej odporny, ponieważ logika stylu jest do niego dołączona niezależnie od tego, w którym miejscu na stronie się znajduje.
Korzystanie z zapytań dotyczących kontenerów
Aby tworzyć kompilacje przy użyciu zapytań dotyczących kontenerów, musisz najpierw ustawić izolację elementu nadrzędnego. Aby to zrobić, ustaw container-type w kontenerze nadrzędnym. Możesz mieć kartę z obrazem i tekstem, który może wyglądać tak:
Aby utworzyć zapytanie o kontener, ustaw container-type w kontenerze karty:
.card-container {
container-type: inline-size;
}
Ustawienie w polu container-type wartości inline-size wysyła zapytanie o rozmiar wbudowanego w kierunku elementu nadrzędnego. W przypadku języków łacińskich, np. angielskiego, będzie to szerokość karty, ponieważ tekst przesuwa się od lewej do prawej.
Teraz możemy użyć tego kontenera do zastosowania stylów do dowolnego z jego elementów podrzędnych, używając elementu @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Selektor nadrzędny :has()
Pseudoklasa :has() CSS 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 w treści: span. Możesz użyć tej opcji, aby określić styl samego akapitu nadrzędnego lub dowolnego elementu w nim. Przydatnym przykładem jest użycie metody figure:has(figcaption) do określania stylu elementu figure zawierającego podpis. Więcej informacji na temat :has() znajdziesz w tym artykule Jheya Tompkinsa.
Zapytania dotyczące kontenera i :has()
Możesz połączyć nadrzędne możliwości wyboru funkcji :has() z możliwościami nadrzędnych zapytań dotyczących kontenerów, aby utworzyć naprawdę dynamiczne style wewnętrzne.
Rozwińmy pierwszy przykład, dodając 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 wyglądał bardziej celowo bez obrazu.
W tym przykładzie karta z obrazem ma szablon siatki z 2 kolumnami, a karta bez obrazu ma układ jednokolumnowy. Poza tym karta bez obrazu ma większy nagłówek. Aby go napisać w elemencie :has(), użyj tego arkusza CSS.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
Szukasz elementu z klasą visual, który pozwala zastosować styl 2 kolumny powyżej. Kolejna prosta funkcja CSS to :not(). Zawierają one tę samą specyfikację co :has(), ale są dostępne od dłuższego czasu i mają lepszą obsługę przeglądarek. Możesz nawet połączyć elementy :has() i :not(), na przykład:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
W powyższym kodzie piszemy selektor, który zmienia styl h1 na karcie, która nie zawiera klasy visual. W ten sposób możesz bardzo wyraźnie dostosować rozmiar czcionki.
Jak to wszystko połączyć
Powyższa demonstracja pokazuje kombinację elementów :has(), :not() i @container, ale zapytania dotyczące kontenerów są szczególnie przydatne, gdy ten sam element jest używany w wielu miejscach. Dodajmy nieco stylu i pokaż te karty obok siebie w siatce.
Teraz naprawdę widać siłę współczesnego CSS. Potrafimy pisać przejrzyste style z wykorzystaniem stylów kierowania, które łączą logikę i logikę z logiką i tworzą naprawdę solidne komponenty. Te 2 zaawansowane funkcje są dostępne w Chromium 105 i zyskują popularność w różnych przeglądarkach, dlatego jest to znakomity czas dla programistów UI.