Dave Rupert med lite modern CSS-magi som tar itu med en av dessa klassiska gåtor: vad händer när CSS för komponenten inte kan hantera innehållet vi kastar på den?
Den specifika situationen är när ett layoutrutnät förväntar sig ett jämnt antal objekt, men levereras med ett udda nummer istället. Vi är kvar med ett "dinglande" element i slutet som kastar bort layouten. Det låter som att det är något som behövs Defensiv CSS och Dave åstadkommer det.
Han sträcker sig efter :has() för att skriva en snygg väljare som sniffar fram det sista objektet i ett rutnät som innehåller ett udda antal objekt:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Att bryta ner det:
- Vi har en föräldrabehållare av
.items. - Om behållaren
:has()an.itembarn som är det sista i sitt slag, - …och det
.itemråkar vara en instans med udda nummer, - …välj sedan den första
.itemelement av den typen och stil det!
I det här fallet, det sista .item kan ställas in på full bredd för att förhindra hål i layouten.
Om... då... CSS har villkorlig logik! Vi pratar bara om stöd för Safari TP och Edge/Chrome Canary för tillfället, men det är ganska häftigt.
Som slumpen har det, delade Temani Afif nyligen de trick han lärt sig under tiden experimentera med implicita rutnät. Genom att dra fördel av CSS Grids automatiska placeringsalgoritm, behöver vi inte ens explicit deklarera ett fast antal kolumner och rader för ett rutnät – CSS kommer att skapa dem åt oss om de behövs!
Nej, Temanis tekniker är inte alternativa lösningar på Daves "dinglar"-dilemma. Men att kombinera Temanis inställning till repeterbara rutnätslayoutmönster med Daves defensiva CSS-användning av :has(), får vi ett ganska kraftfullt och komplext utseende rutnät som är lätt och kan hantera hur många artiklar som helst samtidigt som det bibehåller ett balanserat, repeterbart mönster.
