{"id":668,"date":"2016-11-15T16:19:47","date_gmt":"2016-11-15T15:19:47","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/usare-css-mod-queries-con-range-selector\/"},"modified":"2016-11-15T16:19:47","modified_gmt":"2016-11-15T15:19:47","slug":"usare-css-mod-queries-con-range-selector","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/usare-css-mod-queries-con-range-selector\/","title":{"rendered":"Usare le CSS Mod Queries con i range selectors"},"content":{"rendered":"

Recentemente, mi \u00e8 stato chiesto di costruire una semplice lista che venisse visualizzata in una griglia, che sarebbe cominciata con un singolo elemento e sarebbe cresciuta durante il giorno, pur rimanendo ordinata, indipendentemente dalla sua lunghezza. Quindi, come si fa a volte quando si \u00e8 indaffarati con una cosa e ci viene chiesto di farne una completamente diversa, ho cercato di pensare ad una qualsiasi ragione per cui non si potesse fare, non ne ho trovate e ho distrattamente risposto \u201cS\u00ec\u201d.<\/p>\n

All’epoca, lavoravo al sito web di un’organizzazione che si occupa di notizie con sede a Londra. Avevamo passato l’anno precedente a migrare il loro CMS alla piattaforma Adobe AEM e al contempo stavamo implementando una UI responsive, entrambe grandi miglioramenti. Dal momento che quella fase era completa, stavamo cominciando a concentrarci sui dettagli della UI e sulla realizzazione di nuove feature. Il progetto di sviluppo era diviso tra un numero di piccoli team semi-autonomi. Il mio team si stava concentrando sulle pagine hub e io guidavo il lavoro sulla UI.<\/p>\n

Sostanzialmente, ogni pagina hub \u00e8 una lista di liste, messe l\u00ec semplicemente per aiutare i lettori a trovare dei contenuti che possano interessarli. Come potete immaginare, un sito web di news \u00e8 quasi esclusivamente fatto di liste di contenuto! Una pagina piena di liste verticali generiche non sarebbe di aiuto n\u00e9 tantomeno gradevole: volevamo che ai lettori piacesse scorrere il contenuto collegato alla loro sfera di interesse. Le sezioni dovevano essere distinte e le liste avrebbero dovuto essere sia distinguibili individualmente sia formare un tutto armonioso. In breve, la visualizzazione era cruciale per l’usabilit\u00e0 e l’efficacia dell’intera pagina.<\/p>\n

Quella \u201csemplice lista\u201d che ho detto che avrei creato sarebbe stata di alto profilo, posizionata nel suo pannello vicino al top della pagina hub, con lo scopo di sottolineare uno specifico punto di interesse. Cominciando con un item e crescendo durante tutto il giorno man mano che vengono pubblicati nuovi articoli, la lista doveva essere una griglia rettangolare piuttosto che una singola colonna e non aver mai degli item che avanzano nell’ultima riga. E non importa quanti elementi figlio contenga in un qualunque momento, deve rimanere ordinata e pulita perch\u00e9 dovrebbe apparire prima del fold. Ogni item dovrebbe essere pi\u00f9 o meno quadrato, con un primo item con larghezza impostata al 100%, i secondi due al 50% e tutti i seguenti item al 33%, sistemati in righe di tre. Improvvisamente, la mia semplice lista \u00e8 tutt’altro che semplice.<\/p>\n

Non tutti vogliono una griglia generica o uno stack di item identici: c’\u00e8 qualcosa di bello nel selezionare gli elementi prominenti, nel raggrupparli e nel terminare con grazia i fine riga. Questi stili possono essere \u201chard coded\u201d se sapete che la lista sar\u00e0 sempre di una lunghezza esatta, ma diventa pi\u00f9 difficile quando la lunghezza pu\u00f2 cambiare. In che modo posso garantire che quell’ultima riga rimanga in ordine quando ci sono meno di tre item?<\/p>\n

\"Varie Il nostro layout pianificato si distruggerebbe visivamente man mano che si aggiungono item alla lista.<\/p>\n

Quando si \u00e8 trattato di costruire effettivamente questa cosa, ho realizzato che conoscere la lunghezza della lista non era molto utile. Siccome avevo adorato l’eccellente articolo di Heydon Pickering sulle quantity queries per CSS<\/a>, ho supposto di poter scoprire la lunghezza della lista usando le QQ, poi di assegnarle uno stile di conseguenza e che tutto sarebbe andato bene.<\/p>\n

Ma dal momento che la mia lista avrebbe potuto essere di una qualsiasi lunghezza, avevo bisogno di un numero infinito di QQ per soddisfare le richieste! Non potevo fare una QQ per ogni eventualit\u00e0. Inoltre, giravano voci che prima o poi si sarebbe aggiunto un pulsante \u201cLoad More\u201d, permettendo agli utenti di aggiungere dinamicamente un’altra decina di item. Avevo bisogno di una soluzione diversa.<\/p>\n

Dopo un piccolo crollo nervoso, mi sono chiesto: Cosa farebbe Lea Verou<\/a>?<\/em> Beh, non andare in panico sarebbe un buon inizio. Inoltre, potrebbe essere utile semplificare e identificare i requisiti sottostanti. Dal momento che la lista sarebbe fondamentalmente composta da righe di tre elementi, avevo bisogno di sapere il resto della divisione mod 3.<\/p>\n

\n

La \u201cmod\u201d query<\/h2>\n

Essere in grado di selezionare e assegnare stili agli elementi in base al numero di fratelli \u00e8 ottimo, ma c’\u00e8 di pi\u00f9 che la semplice lunghezza. In questo caso, sarebbe molto meglio sapere se la mia lista sia divisibile per un certo numero piuttosto che sapere quanto \u00e8 lunga.<\/p>\n

Sfortunatamente, non c’\u00e8 una mod query nativa in CSS, ma possiamo crearne una combinando due selettori: :nth-child(3n)<\/code> (aka il selettore \u201cmodulo\u201d) e il selettore :first-child<\/code>.<\/p>\n

La query seguente seleziona tutto se la lista \u00e8 divisibile per tre:<\/p>\n

li:nth-last-child(3n):first-child,\nli:nth-last-child(3n):first-child ~ li <\/span>{<\/span> \n \u2026 selects everything in a list divisible by three \u2026 \n}<\/span>\n<\/code><\/pre>\n
Esaminiamo quel codice. (Negli esempi, uso \u201cli\u201c per \u201clist item\u201d).<\/p>\n
Il selettore css:<\/p>\n
li:nth-last-child(3n):first-child ~ li<\/code><\/pre>\n
Seleziona tutti i sibling seguenti:<\/strong><\/p>\n
... ~ li<\/code><\/pre>\n
Il primo figlio (il primo \u201cli\u201c nell’elenco, in questo caso):<\/strong><\/p>\n
...:first-child ...<\/code><\/pre>\n
Ogni terzo item partendo dalla fine della lista:<\/strong><\/p>\n
...:nth-last-child(3n):...<\/code><\/pre>\n
Questa combinazione in sostanza significa che se il primo figlio \u00e8 3n<\/code> dalla fine, allora selezioni tutti i suoi sibling.<\/p>\n
La query seleziona tutti i sibling del primo item, ma non include il primo item stesso, perci\u00f2 dobbiamo aggiungere un selettore separatamente per questo.<\/p>\n
li:nth-last-child(3n):first-child,\nli:nth-last-child(3n):first-child ~ li <\/span>{<\/span> \n\u2026 styles for list items in a list divisible by 3 \u2026  \n}<\/span>\n<\/code><\/pre>\n
Cosa succede coi resti?<\/h2>\n
Con la mia mod query, posso selezionare tutti gli item in un elenco se l’elenco \u00e8 divisibile per tre, ma dovr\u00f2 applicare stili diversi se ci sono dei resti. (Nel caso del reso 1, avr\u00f2 solo bisogno di contare alla rovescia nel CSS dal penultimo elemento invece che dall’ultimo. Posso fare ci\u00f2 semplicemente aggiungendo +1<\/code> alla query.)<\/p>\n
li:nth-last-child(3n+1):first-child,\nli:nth-last-child(3n+1):first-child ~ li <\/span>{<\/span> \n\u2026 styles for elements in list length, mod 3 remainder = 1 \u2026  \n}<\/span>\n<\/code><\/pre>\n
Lo stesso vale per il resto 2: devo solo aggiungere +2<\/code> alla query.<\/p>\n
li:nth-last-child(3n+2):first-child,\nli:nth-last-child(3n+2):first-child ~ li <\/span>{<\/span> \n\u2026 styles for elements in list length, mod 3 remainder = 2 \u2026  \n}<\/span> \n<\/code><\/pre>\n
Creare un selettore di intervallo (range)<\/h2>\n
Adesso ho un modo per determinare se la lunghezza della lista \u00e8 divisibile per un qualsiasi numero, con o senza resto, ma ho ancora bisogno di selezionare un range. Cos\u00ec come per le mod query, non c’\u00e8 in CSS un selettore di range nativo, ma possiamo crearne uno combinando due selettori: :nth-child(n)<\/code> (i.e., \u201ctutto ci\u00f2 che sta sopra\u201d) e :nth-child(-n)<\/code> (i.e., \u201ctutto ci\u00f2 che sta sotto\u201d).<\/p>\n
Questo ci permette di selezionare gli item dal 3 al 5, inclusi:<\/p>\n
li:nth-child(n+3):nth-child(-n+5)<\/span>{<\/span> \n... styles for items 3 to 5 inclusive ...\n}<\/span>\n<\/code><\/pre>\n
\"Una Abbiamo selezionato un range: i gatti 3, 4 e 5.<\/p>\n
Vero, si potrebbe ottenere lo stesso risultato in maniera altrettanto semplice con la sintassi :nth-child(n)<\/code> e puntando direttamente alle posizioni dell’item – li:nth-child(3), li:nth-child(4), li:nth-child(5){ ... }<\/code> – ma definire l’inizio e la fine di un range \u00e8 ovviamente molto pi\u00f9 versatile. Scomponiamo brevemente il selettore per vedere come funziona.<\/p>\n
Seleziona tutti gli item fino al quinto item incluso:<\/strong><\/p>\n
li:nth-child(n+3):nth-child(-n+5)<\/span>{<\/span> \u2026 }<\/span><\/code><\/pre>\n
Seleziona tutti gli item dal terzo in poi:<\/strong><\/p>\n
li:nth-child(n+3):nth-child(-n+5)<\/span>{<\/span> \u2026 }<\/span><\/code><\/pre>\n
Combinando i due \u2014 li:nth-child(n+3):nth-child(-n+5)<\/code> \u2014 si crea il selettore di range.<\/p>\n
Se osserviamo un esempio, potremmo avere una griglia di prodotti in cui i list item contengono un’immagine, il titolo e la descrizione. Supponiamo che l’immagine del prodotto parli da sola, cos\u00ec nella prima riga promuoviamo l’immagine e nascondiamo tutto il testo. Nella seconda e terza riga, mostriamo il titolo e l’immagine come una thumbnail, mentre nelle righe seguenti nascondiamo l’immagine e mostriamo il titolo e la descrizione su una singola riga.<\/p>\n
Usando il range selector, possiamo selezionare i primi tre, dal quarto al nono e dal decimo in poi. Questo ci permette di cambiare i range nei vari breakpoint nel CSS cos\u00ec la nostra griglia prodotto rimane bellina e responsive.<\/p>\n
Note sui mixin SCSS<\/h2>\n
Dal momento che stavo usando un preprocessore CSS, ho semplificato il mio codice usando le funzioni di questo: ecco i mixin SCSS per la creazione di range selector e mod query.<\/p>\n
\/\/ range selector mixin\n@mixin select-range($start, $end)<\/span>{<\/span>\n  &:nth-child(n+#<\/span>{<\/span>$start}<\/span>):nth-child(-n+#<\/span>{<\/span>$end}<\/span>)<\/span>{<\/span>\n   @content<\/span>;<\/span>\n   }<\/span>\n}<\/span>\n\/\/ mod query mixin\n@mixin mod-list($mod, $remainder)<\/span>{<\/span>\n  &:nth-last-child(#<\/span>{<\/span>$mod}<\/span>n+#<\/span>{<\/span>$remainder}<\/span>):first-child,\n  &:nth-last-child(#<\/span>{<\/span>$mod}<\/span>n+#<\/span>{<\/span>$remainder}<\/span>):first-child ~ li <\/span>{<\/span>\n    @content<\/span>;<\/span>\n    }<\/span>\n}<\/span>\n<\/code><\/pre>\n
Poi posso annidare i mixin nel mio codice.<\/p>\n
li <\/span>{<\/span>\n@include mod-list(3, 0)<\/span>{<\/span>\n  @include select-range(3, 5)<\/span>{<\/span>\n    \/\/ styles for items 3 to 5 in a list mod 3 remainder = 0\n    }<\/span>\n  }<\/span>\n}<\/span>\n<\/code><\/pre>\n
Il che, se non altro, \u00e8 molto pi\u00f9 semplice da leggere!<\/p>\n
Unire tutti i pezzi<\/h2>\n
Cos\u00ec, adesso che ho un piccolo arsenale di tool che mi aiutano a gestire i mod, i range e i range all’interno dei mod, posso staccarmi dall’implementazione standard di liste a lunghezza fissa o a layout fisso. L’uso creativo delle mod queries e dei selettori di range mi permette di applicare stili per cambiare il layout degli elementi.<\/p>\n
Tornando ai requisiti originali (far s\u00ec che la mia lista si comporti bene) \u00e8 stato subito chiaro che se avessi assegnato degli stili alla lista assumendo che fosse un multiplo di tre, allora ci sarebbero stati solo altri due use case da supportare:<\/p>\n
\"Una Una griglia di prodotti per i nostri gatti. Abbiamo una grafica isolata nella riga superiore, piccole grafiche pi\u00f9 i titoli prodotto nella seconda e nella terza riga e poi perdiamo le grafiche e mostriamo solo il testo per le righe seguenti. Vedi il Pen Using CSS Mod Queries with Range Selectors: Fig 4<\/a> di Patrick (@clanceyp<\/a>) su CodePen<\/a>.<\/span><\/p>\n
Guardate la demo e provatela!<\/a><\/p>\n
\"Quattro Sono selezionate solo le righe divisibili per 3. Vedi il Pen Using CSS Mod Queries with Range Selectors: Fig 2<\/a> di Patrick (@clanceyp<\/a>) su CodePen<\/a>. Immagine del gatto di Paper Bird Publishing<\/a>.<\/span><\/p>\n