Dave Rupert z odrobiną nowoczesnej magii CSS który rozwiązuje jedną z tych klasycznych zagadek: co się dzieje, gdy CSS dla komponentu nie jest w stanie obsłużyć treści, które na niego wrzucamy?
Konkretna sytuacja ma miejsce, gdy siatka układu oczekuje parzystej liczby elementów, ale zamiast tego jest dostarczana z liczbą nieparzystą. Zostaje nam na końcu element „wiszący”, który odrzuca układ. Wygląda na to, że potrzebne jest trochę Defensywny CSS a Dave to osiąga.
Sięga po :has() aby napisać sprytny selektor, który wywęszy ostatni element w siatce zawierającej nieparzystą liczbę elementów:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Przełamując to:
- Mamy kontener nadrzędny
.items. - Jeśli pojemnik
:has()an.itemdziecko, które jest ostatnie w swoim rodzaju, - …i to
.itemzdarza się, że jest to instancja o nieparzystym numerze, - …następnie wybierz pierwszy
.itemelement tego typu i stylizuj go!
W tym przypadku to ostatnie .item można ustawić na pełną szerokość, aby zapobiec dziurom w układzie.
Jeśli… to… CSS ma moc logiki warunkowej! W tej chwili mówimy tylko o wsparciu dla Safari TP i Edge/Chrome Canary, ale to jest całkiem niesamowite.
Tak się złożyło, że Temani Afif podzielił się ostatnio sztuczkami, których nauczył się podczas eksperymentowanie z niejawnymi siatkami. Korzystając z algorytmu automatycznego umieszczania CSS Grid, nie musimy nawet jawnie deklarować stałej liczby kolumn i wierszy dla siatki — CSS utworzy je za nas, jeśli będą potrzebne!
Nie, techniki Temaniego nie są alternatywnymi rozwiązaniami dylematu Dave'a „dangler”. Ale łącząc podejście Temaniego do powtarzalnych wzorców układu siatki z defensywnym użyciem CSS Dave'a :has(), otrzymujemy dość potężną i skomplikowaną siatkę, która jest lekka i zdolna do obsługi dowolnej liczby przedmiotów, zachowując jednocześnie zrównoważony, powtarzalny wzór.
