Dave Rupert modern CSS varázslattal amely megoldja a klasszikus rejtvények egyikét: mi történik, ha a CSS for komponens nem képes kezelni az általunk felvetett tartalmat?
A konkrét helyzet az, amikor egy elrendezési rács páros számú elemet vár, de ehelyett páratlan számmal látja el. Maradunk a végén egy „lógó” elemmel, amely kidobja az elrendezést. Úgy tűnik, valamire szükség van Védekező CSS és Dave teljesíti.
Odanyúl :has() egy remek választó írásához, amely kiszimatolja az utolsó elemet egy páratlan számú elemet tartalmazó rácsból:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Ezt lebontva:
- Van egy szülőtárolónk
.items. - Ha a konténer
:has()an.itemgyermek, aki a maga típusában az utolsó, - …és az
.itemtörténetesen páratlan számú példány, - …majd válassza ki az elsőt
.itemeleme ennek a típusnak, és stílus ez!
Ebben az esetben az utolsó .item beállítható teljes szélességre, hogy elkerülje a lyukakat az elrendezésben.
Ha… akkor… A CSS-nek feltételes logikai képességei vannak! Jelenleg csak a Safari TP és az Edge/Chrome Canary támogatásáról beszélünk, de ez elég fantasztikus.
A véletlennek köszönhetően Temani Afif nemrégiben megosztott trükköket, amelyeket közben megtanult implicit rácsokkal kísérletezik. A CSS Grid automatikus elhelyezési algoritmusának előnyeit kihasználva még csak meghatározott számú oszlopot és sort sem kell kifejezetten deklarálnunk egy rácshoz – a CSS elkészíti nekünk, ha szükség van rájuk!
Nem, Temani technikái nem alternatív megoldások Dave „lógós” dilemmájára. De ötvözi Temani megközelítését az ismételhető rácselrendezési mintákhoz Dave védekező CSS-használatával. :has(), egy elég erős és összetett kinézetű rácsot kapunk, amely könnyű és képes tetszőleges számú elem kezelésére, miközben megőrzi a kiegyensúlyozott, megismételhető mintát.
