Dave Rupert med noget moderne CSS-magi der løser en af de klassiske gåder: hvad sker der, når CSS for komponenten ikke er i stand til at håndtere det indhold, vi kaster efter det?
Den specifikke situation er, når et layoutgitter forventer et lige antal elementer, men i stedet forsynes med et ulige antal. Vi står tilbage med et "dinglende" element for enden, der kaster layoutet af sig. Det lyder som om der er noget der skal til Defensiv CSS og Dave opnår det.
Han rækker ud efter :has() for at skrive en smart vælger, der opsnuser det sidste element i et gitter, der indeholder et ulige antal elementer:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }At dele det ned:
- Vi har en forældrebeholder af
.items. - Hvis beholderen
:has()an.itembarn, der er det sidste af sin type, - …og det
.itemtilfældigvis er et ulige forekomst, - … vælg derefter den første
.itemelement af den type og stil det!
I dette tilfælde det sidste .item kan indstilles til at gå i fuld bredde for at forhindre huller i layoutet.
Hvis ... så ... CSS har betingede logiske kræfter! Vi taler kun om support til Safari TP og Edge/Chrome Canary i øjeblikket, men det er ret fantastisk.
Som tilfældighederne har det, delte Temani Afif for nylig tricks, han lærte imens eksperimentere med implicitte gitter. Ved at drage fordel af CSS Grids automatiske placeringsalgoritme, behøver vi ikke engang eksplicit at angive et fast antal kolonner og rækker for et gitter – CSS vil oprette dem for os, hvis de er nødvendige!
Nej, Temanis teknikker er ikke alternative løsninger til Daves "dangler"-dilemma. Men ved at kombinere Temanis tilgang til gentagelige gitterlayoutmønstre med Daves defensive CSS-brug af :has(), får vi et ret kraftfuldt og komplekst udseende gitter, der er let og i stand til at håndtere et hvilket som helst antal emner, mens det bibeholder et afbalanceret, gentageligt mønster.
