Dave Rupert med litt moderne CSS-magi som takler en av disse klassiske gåtene: hva skjer når CSS for komponenten ikke er i stand til å håndtere innholdet vi kaster på den?
Den spesifikke situasjonen er når et layoutrutenett forventer et partall antall elementer, men leveres med et oddetall i stedet. Vi sitter igjen med et "dinglende" element på slutten som kaster av layouten. Høres ut som det er noe som trengs Defensiv CSS og Dave oppnår det.
Han strekker seg etter :has() for å skrive en smart velger som snuser ut det siste elementet i et rutenett som inneholder et oddetall av elementer:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Bryter det ned:
- Vi har en foreldrebeholder av
.items. - Hvis beholderen
:has()an.itembarn som er det siste av sin type, - …og det
.itemtilfeldigvis er en oddetallsforekomst, - …velg deretter den første
.itemelement av den typen og stil det!
I dette tilfellet, det siste .item kan settes til å gå i full bredde for å forhindre hull i oppsettet.
Hvis ... da ... CSS har betingede logiske krefter! Vi snakker bare om støtte for Safari TP og Edge/Chrome Canary for øyeblikket, men det er ganske fantastisk.
Som en tilfeldighet har Temani Afif nylig delt triks han lærte mens han eksperimentere med implisitte rutenett. Ved å dra nytte av CSS Grids automatiske plasseringsalgoritme, trenger vi ikke engang å eksplisitt deklarere et fast antall kolonner og rader for et rutenett – CSS vil lage dem for oss hvis de trengs!
Nei, Temanis teknikker er ikke alternative løsninger på Daves "dangler"-dilemma. Men å kombinere Temanis tilnærming til repeterbare rutenettlayoutmønstre med Daves defensive CSS-bruk av :has(), får vi et ganske kraftig og komplekst utseende rutenett som er lett og i stand til å håndtere et hvilket som helst antall elementer samtidig som det opprettholder et balansert, repeterbart mønster.
