Dave Rupert cu ceva magie CSS modernă care abordează una dintre acele dilema clasice: ce se întâmplă atunci când CSS-ul pentru componentă nu poate gestiona conținutul pe care îl aruncăm?
Situația specifică este atunci când o grilă de aspect se așteaptă la un număr par de articole, dar este furnizată cu un număr impar. Rămânem cu un element „atârnător” la sfârșit care aruncă în afara aspectului. Se pare că ceea ce este nevoie este ceva CSS defensiv iar Dave o realizează.
El se întinde spre :has() pentru a scrie un selector ingenios care adulmecă ultimul element dintr-o grilă care conține un număr impar de articole:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Defalcând asta:
- Avem un container părinte de
.items. - Dacă recipientul
:has()an.itemcopil care este ultimul de acest tip, - …și asta
.itemse întâmplă să fie o instanță cu număr impar, - … apoi selectați primul
.itemelement de acest tip și stilați-l!
În acest caz, ultimul .item poate fi setat pentru a merge pe toată lățimea pentru a preveni găuri în aspect.
Dacă... atunci... CSS are puteri logice condiționate! Vorbim doar despre suport pentru Safari TP și Edge/Chrome Canary în acest moment, dar asta este destul de grozav.
Din întâmplare, Temani Afif a împărtășit recent trucuri pe care le-a învățat în timp experimentarea cu grile implicite. Profitând de algoritmul de plasare automată al CSS Grid, nici măcar nu trebuie să declarăm în mod explicit un număr fix de coloane și rânduri pentru o grilă - CSS le va crea pentru noi dacă este nevoie!
Nu, tehnicile lui Temani nu sunt soluții alternative la dilema „dangler” a lui Dave. Dar combinând abordarea lui Temani asupra modelelor repetabile de aspect al grilei cu utilizarea CSS defensivă de către Dave a :has(), obținem o grilă destul de puternică și cu aspect complex, ușoară și capabilă să gestioneze orice număr de articole, menținând în același timp un model echilibrat și repetabil.
