Dave Rupert modernia CSS-taikaa joka ratkaisee yhden noista klassisista hämmennöistä: mitä tapahtuu, kun komponentin CSS ei pysty käsittelemään sille antamaamme sisältöä?
Erityinen tilanne on, kun asetteluruudukko odottaa parillisen määrän kohteita, mutta sen sijaan toimitetaan pariton numero. Jäljelle jää "roikkuva" elementti, joka heittää ulkoasun pois. Kuulostaa siltä, että jotain tarvitaan Puolustava CSS ja Dave suorittaa sen.
Hän kurkottaa :has() kirjoittaaksesi näppärän valitsimen, joka haistaa viimeisen kohteen ruudukosta, joka sisältää parittoman määrän kohteita:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Sen rikkominen:
- Meillä on pääsäiliö
.items. - Jos säiliö
:has()an.itemlapsi, joka on lajissaan viimeinen, - …ja tuo
.itemsattuu olemaan pariton esiintymä, - …valitse sitten ensimmäinen
.itemtämän tyyppinen elementti ja tyyli se!
Tässä tapauksessa viimeinen .item voidaan asettaa täysleveäksi, jotta layoutiin ei muodostu reikiä.
Jos… niin… CSS:llä on ehdolliset logiikkavaltuudet! Puhumme tällä hetkellä vain Safari TP:n ja Edge/Chrome Canaryn tuesta, mutta se on aika mahtavaa.
Temani Afif jakoi äskettäin temppuja, jotka hän oppi aikanaan kokeilemalla implisiittisiä verkkoja. Hyödyntämällä CSS Gridin automaattista sijoittelualgoritmia, meidän ei tarvitse edes erikseen ilmoittaa kiinteää määrää sarakkeita ja rivejä ruudukolle – CSS luo ne meille, jos niitä tarvitaan!
Ei, Temanin tekniikat eivät ole vaihtoehtoisia ratkaisuja Daven "roikkuvan" dilemmaan. Mutta yhdistämällä Temanin lähestymistapa toistettaviin ruudukkoasettelukuvioihin Daven puolustavaan CSS-käyttöön. :has(), saamme melko tehokkaan ja monimutkaisen näköisen ruudukon, joka on kevyt ja pystyy käsittelemään minkä tahansa määrän kohteita säilyttäen samalla tasapainoisen, toistettavan kuvion.
