Spots 
Le nuove API di scroll per costruire caroselli accessibili, con controlli e indicatori gestiti dal browser. Le nuove API di scroll per costruire caroselli accessibili, con controlli e indicatori gestiti dal browser.
I carousel dividono: c’è chi li associa subito ai grandi “hero slider” pieni di autoplay e contenuti ignorati, e chi invece li usa ogni giorno per pattern molto più utili (liste prodotto, gallerie, app store, playlist, card di articoli, recensioni). Il punto è semplice: su schermi piccoli e layout densi, comprimere più elementi in una fascia orizzontale scorrevole spesso è la scelta più pragmatica.
La cosa interessante è che un carousel non è magia: è uno scroll container con qualche regola in più. E negli ultimi rilasci di Chrome sono arrivate API CSS che alzano notevolmente il livello: controlli nativi, indicatori, stato “corrente” e perfino possibilità di rendere inert ciò che è off-screen. Di seguito una panoramica ragionata (e pratica) di come comporre un carousel moderno in CSS. 1) La base: un carousel è uno scroller con scroll-snap La struttura minima parte da un contenitore che scorre orizzontalmente e da item che “agganciano” una posizione. Risultato: puoi scorrere liberamente e, al termine del gesto, l’elemento più vicino si allinea al centro. Nascondere la scrollbar senza uccidere lo scroll Per un look più “carousel”, spesso conviene nascondere la barra mantenendo comunque lo scorrimento attivo:
Questa scelta è molto diversa da overflow: hidden: lo scroll rimane disponibile (touch/trackpad/ruota), semplicemente non “consuma” spazio con la scrollbar.
Il problema successivo però è inevitabile: se non vedo la scrollbar, come capisco che posso scorrere? Qui entrano in gioco i controlli nativi. 2) Pulsanti di scorrimento nativi con ::scroll-button()
CSS introduce un pseudo-elemento funzionale per generare pulsanti “precedente/successivo” direttamente nello scroll container: ::scroll-button(left) / ::scroll-button(right) per caroselli orizzontali ::scroll-button(up) / ::scroll-button(down) per quelli verticali alternative logiche consigliate: inline-start, inline-end, block-start, block-end I pulsanti vengono creati solo quando assegni un content diverso da none. Esempio (con etichette accessibili incluse via content): Comportamento “gratis”: disabled automatico
Un vantaggio enorme è che il browser gestisce lo stato: quando non puoi più scorrere in una direzione, il relativo pulsante risulta disabilitato. Puoi anche stilizzarlo con :disabled (ad esempio per nasconderlo o ridurne l’opacità).
Per metterli “sopra” al carosello o ai lati, la strada più pulita oggi è usare l’anchor positioning: consente di ancorare i pulsanti al container senza hack di layout. (Vale la pena adottare proprietà logiche anche qui, così il carousel resta pronto per RTL e localizzazioni.)
Nota: essendo pseudo-elementi, i ::scroll-button() hanno alcune limitazioni di customizzazione rispetto a elementi DOM reali—ma in molti casi sono un compromesso eccellente.
Nota: essendo pseudo-elementi, i ::scroll-button() hanno alcune limitazioni di customizzazione rispetto a elementi DOM reali—ma in molti casi sono un compromesso eccellente. 3) Indicatori (i “pallini”) con scroll-marker-group e ::scroll-marker Il pattern classico dei puntini cliccabili può essere costruito con: 1) una proprietà sul container che abilita il gruppo marker 2) uno pseudo-elemento marker sugli item
Le nuove API di scroll per costruire caroselli accessibili, con controlli e indicatori gestiti dal browser.