Dave Rupert kaasaegse CSS-i maagiaga mis lahendab ühe neist klassikalistest mõistatustest: mis juhtub siis, kui komponendi CSS ei suuda käsitleda sisu, mille me sellele heidame?
Konkreetne olukord on siis, kui paigutusruudustik eeldab paarisarvu elemente, kuid selle asemel esitatakse paaritu arv. Meile jääb lõppu rippuv element, mis viskab paigutuse kõrvale. Tundub, et vaja on mõnda Kaitsev CSS ja Dave saavutab selle.
Ta sirutab käe :has() et kirjutada vahva valija, mis nuusutab paaritu arvu üksusi sisaldava ruudustiku viimase üksuse:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Selle tükeldamine:
- Meil on emakonteiner
.items. - Kui konteiner
:has()an.itemlaps, kes on oma tüüpi viimane, - …ja see
.itemjuhtub olema paaritu arvuga eksemplar, - … ja seejärel valige esimene
.itemseda tüüpi elementi ja stiil seda!
Sel juhul viimane .item saab seada täislaiusele, et vältida paigutuses auke.
Kui… siis… CSS-il on tingimusliku loogika võimed! Praegu räägime ainult Safari TP ja Edge/Chrome Canary toest, kuid see on päris vinge.
Temani Afif jagas hiljuti nippe, mida ta õppis kaudsete võredega katsetamine. Kasutades ära CSS Gridi automaatse paigutuse algoritmi, ei pea me isegi ruudustiku jaoks selgesõnaliselt deklareerima kindlat arvu veerge ja ridu – CSS loob need meie eest, kui neid vaja on!
Ei, Temani tehnikad ei ole alternatiivsed lahendused Dave'i rippuva dilemma jaoks. Kuid kombineerides Temani lähenemist korratavatele ruudustikupaigutusmustritele Dave'i kaitsva CSS-i kasutamisega :has(), saame üsna võimsa ja keeruka välimusega ruudustiku, mis on kerge ja suudab käsitleda mis tahes arvu üksusi, säilitades samal ajal tasakaalustatud ja korratava mustri.
