Dave Rupert con un po' di magia CSS moderna che affronta uno di quei classici enigmi: cosa succede quando il componente CSS per non è in grado di gestire il contenuto che gli lanciamo?
La situazione specifica è quando una griglia di layout prevede un numero pari di elementi, ma viene invece fornita con un numero dispari. Alla fine rimane un elemento "pendente" che elimina il layout. Sembra che ciò che serve sia un po' CSS difensivo e Dave lo realizza.
Lui raggiunge :has() per scrivere un elegante selettore che annusi l'ultimo elemento in una griglia che contiene un numero dispari di elementi:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Scomponendolo:
- Abbiamo un contenitore genitore di
.items. - Se il contenitore
:has()an.itembambino che è l'ultimo del suo genere, - …e quello
.itemsembra essere un'istanza dispari, - …quindi seleziona il primo
.itemelemento di quel tipo e disegnalo!
In questo caso, quest'ultimo .item può essere impostato per andare a tutta larghezza per evitare buchi nel layout.
Se... allora... CSS ha poteri logici condizionali! Al momento stiamo parlando solo del supporto per Safari TP e Edge/Chrome Canary, ma è davvero fantastico.
Per caso, Temani Afif ha recentemente condiviso i trucchi che ha imparato mentre sperimentare griglie implicite. Sfruttando l'algoritmo di posizionamento automatico di CSS Grid, non dobbiamo nemmeno dichiarare esplicitamente un numero fisso di colonne e righe per una griglia: CSS le creerà per noi se necessario!
No, le tecniche di Temani non sono soluzioni alternative al dilemma del “pendolare” di Dave. Ma combinando l'approccio di Temani ai modelli di layout della griglia ripetibili con l'uso difensivo dei CSS di Dave :has(), otteniamo una griglia piuttosto potente e dall'aspetto complesso, leggera e in grado di gestire un numero qualsiasi di elementi mantenendo uno schema bilanciato e ripetibile.
