Dave Rupert z nekaj sodobne čarovnije CSS ki se loti ene od tistih klasičnih zagat: kaj se zgodi, ko CSS za komponento ne more obravnavati vsebine, ki mu jo vržemo?
Posebna situacija je, ko mreža postavitve pričakuje sodo število elementov, vendar je namesto tega na voljo z lihim številom. Na koncu nam ostane "viseči" element, ki pokvari postavitev. Sliši se, kot da je potrebno nekaj Obrambni CSS in Dave to doseže.
Posega po :has() da napišete odličen izbirnik, ki povoha zadnji element v mreži, ki vsebuje liho število elementov:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Razčlenitev tega:
- Imamo nadrejeni vsebnik
.items. - Če posoda
:has()an.itemotrok, ki je zadnji svoje vrste, - ... in to
.itemse zgodi, da je liho oštevilčen primer, - … nato izberite prvo
.itemelement te vrste in ga stilizirajte!
V tem primeru zadnje .item lahko nastavite na celotno širino, da preprečite luknje v postavitvi.
Če … potem … ima CSS pogojne logične moči! Trenutno govorimo le o podpori za Safari TP in Edge/Chrome Canary, vendar je to precej super.
Po naključju je Temani Afif nedavno delil trike, ki se jih je naučil eksperimentiranje z implicitnimi mrežami. Če izkoristimo algoritem za samodejno umestitev CSS Grid, nam sploh ni treba izrecno deklarirati fiksnega števila stolpcev in vrstic za mrežo – CSS jih bo ustvaril namesto nas, če jih bomo potrebovali!
Ne, Temanijeve tehnike niso alternativna rešitev za Davovo dilemo »otepanja«. Toda kombinacija Temanijevega pristopa k ponovljivim vzorcem postavitve mreže z Daveovo obrambno uporabo CSS :has(), dobimo precej zmogljivo in zapleteno mrežo, ki je lahka in zmožna obdelati poljubno število elementov, hkrati pa ohraniti uravnotežen, ponovljiv vzorec.
