Usare le CSS Mod Queries con i range selectors

La “mod” query#section1

Essere in grado di selezionare e assegnare stili agli elementi in base al numero di fratelli è ottimo, ma c’è di più 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 è lunga.

Sfortunatamente, non c’è una mod query nativa in CSS, ma possiamo crearne una combinando due selettori: :nth-child(3n) (aka il selettore “modulo”) e il selettore :first-child.

La query seguente seleziona tutto se la lista è divisibile per tre:

li:nth-last-child(3n):first-child,
li:nth-last-child(3n):first-child ~ li { 
 … selects everything in a list divisible by three … 
}

Sono selezionate solo le righe divisibili per 3. Vedi il Pen Using CSS Mod Queries with Range Selectors: Fig 2 di Patrick (@clanceyp) su CodePen. Immagine del gatto di Paper Bird Publishing.

Esaminiamo quel codice. (Negli esempi, uso “li“ per “list item”).

Il selettore css:

li:nth-last-child(3n):first-child ~ li

Seleziona tutti i sibling seguenti:

... ~ li

Il primo figlio (il primo “li“ nell’elenco, in questo caso):

...:first-child ...

Ogni terzo item partendo dalla fine della lista:

...:nth-last-child(3n):...

Questa combinazione in sostanza significa che se il primo figlio è 3n dalla fine, allora selezioni tutti i suoi sibling.

La query seleziona tutti i sibling del primo item, ma non include il primo item stesso, perciò dobbiamo aggiungere un selettore separatamente per questo.

li:nth-last-child(3n):first-child,
li:nth-last-child(3n):first-child ~ li { 
… styles for list items in a list divisible by 3 …  
}

Guardate la demo e provatela!

Cosa succede coi resti?#section2

Con la mia mod query, posso selezionare tutti gli item in un elenco se l’elenco è divisibile per tre, ma dovrò applicare stili diversi se ci sono dei resti. (Nel caso del reso 1, avrò solo bisogno di contare alla rovescia nel CSS dal penultimo elemento invece che dall’ultimo. Posso fare ciò semplicemente aggiungendo +1 alla query.)

li:nth-last-child(3n+1):first-child,
li:nth-last-child(3n+1):first-child ~ li { 
… styles for elements in list length, mod 3 remainder = 1 …  
}

Lo stesso vale per il resto 2: devo solo aggiungere +2 alla query.

li:nth-last-child(3n+2):first-child,
li:nth-last-child(3n+2):first-child ~ li { 
… styles for elements in list length, mod 3 remainder = 2 …  
} 

Creare un selettore di intervallo (range)#section3

Adesso ho un modo per determinare se la lunghezza della lista è divisibile per un qualsiasi numero, con o senza resto, ma ho ancora bisogno di selezionare un range. Così come per le mod query, non c’è in CSS un selettore di range nativo, ma possiamo crearne uno combinando due selettori: :nth-child(n) (i.e., “tutto ciò che sta sopra”) e :nth-child(-n) (i.e., “tutto ciò che sta sotto”).

Questo ci permette di selezionare gli item dal 3 al 5, inclusi:

li:nth-child(n+3):nth-child(-n+5){ 
... styles for items 3 to 5 inclusive ...
}

Abbiamo selezionato un range: i gatti 3, 4 e 5.

Vero, si potrebbe ottenere lo stesso risultato in maniera altrettanto semplice con la sintassi :nth-child(n) e puntando direttamente alle posizioni dell’item – li:nth-child(3), li:nth-child(4), li:nth-child(5){ ... } – ma definire l’inizio e la fine di un range è ovviamente molto più versatile. Scomponiamo brevemente il selettore per vedere come funziona.

Seleziona tutti gli item fino al quinto item incluso:

li:nth-child(n+3):nth-child(-n+5){ … }

Seleziona tutti gli item dal terzo in poi:

li:nth-child(n+3):nth-child(-n+5){ … }

Combinando i due — li:nth-child(n+3):nth-child(-n+5) — si crea il selettore di range.

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ì 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.

Una griglia di prodotti per i nostri gatti. Abbiamo una grafica isolata nella riga superiore, piccole grafiche più 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 di Patrick (@clanceyp) su CodePen.

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ì la nostra griglia prodotto rimane bellina e responsive.

Note sui mixin SCSS#section4

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.

// range selector mixin
@mixin select-range($start, $end){
  &:nth-child(n+#{$start}):nth-child(-n+#{$end}){
   @content;
   }
}
// mod query mixin
@mixin mod-list($mod, $remainder){
  &:nth-last-child(#{$mod}n+#{$remainder}):first-child,
  &:nth-last-child(#{$mod}n+#{$remainder}):first-child ~ li {
    @content;
    }
}

Poi posso annidare i mixin nel mio codice.

li {
@include mod-list(3, 0){
  @include select-range(3, 5){
    // styles for items 3 to 5 in a list mod 3 remainder = 0
    }
  }
}

Il che, se non altro, è molto più semplice da leggere!

Unire tutti i pezzi#section5

Così, 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.

Tornando ai requisiti originali (far sì che la mia lista si comporti bene) è 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:

• Mod 3, resto 1
• Mod 3, resto 2

Se c’era un item rimanente, avrei fatto prendere tre item alla seconda riga (invece che i due di default), ma se il resto fosse stato 2, avrei fatto prendere due item alla terza riga (con il quarto e il quinto item al 50%).

Alla fine, non mi servivano numerose query e le uniche di cui avevo bisogno in realtà erano piuttosto semplici.

C’era un caso speciale: cosa succede se la lista contiene solo due elementi?

Ho risolto questo caso con una query per selezionare il secondo item quando è anche l’ultimo figlio.

li:nth-child(2):last-child { 
... styles for the last item if it’s also the second item ...
}

In fin dei conti, le queries non erano così difficili come mi aspettavo: avevo solo bisogno di combinare i selettori mod e range.

li:nth-last-child(3n):first-child /* mod query */ 
~ li:nth-child(n+3):nth-child(-n+5){ /* range selector */
... styles for 3rd to 5th elements, in a list divisible by 3 ...
}

Alla fine, il mio CSS aveva più o meno questo aspetto:

/* 
  default settings for list (when its mod 3 remainder 0)
  list items are 33% wide
  except; the first item is 100% 
          the second and third are 50%
*/
li {
  width: 33.33%;
}
li:first-child {
  width: 100%;
}
/* range selector for 2nd and 3rd */
li:nth-child(n+2):nth-child(-n+3){
  width: 50%;
}
/* overrides */
/* mod query override, check for mod 3 remainder = 1 */  
li:nth-last-child(3n+1):first-child ~ li:nth-child(n+2):nth-child(-n+3) {
  width: 33.33%; /* override default 50% width for 2nd and 3rd items */
}
/* mod query override, check for mod 3 remainder = 2 */ 
li:nth-last-child(3n+2):first-child ~ li:nth-child(n+4):nth-child(-n+5) {
  width: 50%; /* override default 33% width for 4th and 5th items */
}
/* special case, list contains only two items */
li:nth-child(2):last-child {
  margin-left: 25%;
}