Caroselli con CSS

Adam Argyle

Data di pubblicazione: 20 marzo 2025

A partire da Chrome 135, puoi utilizzare le funzionalità della specifica CSS Overflow 5 progettate per creare esperienze di scorrimento e carosello.

Questo post offre una panoramica di molte esperienze di scorrimento e carosello realizzate utilizzando queste nuove funzionalità e senza JavaScript. Guarda il video seguente e scopri cosa puoi fare ora.

Il video mostra una combinazione di pulsanti di scorrimento, indicatori di scorrimento, animazione basata sullo scorrimento, query scroll-state(), :has(), griglia, ancoraggio e molto altro.

Ancora più impressionante è la storia dell'accessibilità.

Le best practice per i caroselli vengono gestite dal browser, grazie alla collaborazione dei team di ingegneria e accessibilità. Sarebbe molto difficile creare un carosello più accessibile di questo.

Gli elementi di un carosello vengono visualizzati come visualizzazione ad albero di accessibilità, in cui i pulsanti e gli elementi della scheda sono chiaramente indicati per fornire un'anteprima di ciò che uno screen reader vedrà nel carosello.
Screenshot dell'albero di accessibilità del carosello di Chrome DevTools: Demo

Incontra ::scroll-button() e ::scroll-marker()

Un carosello è un'area di scorrimento con fino a due elementi di interfaccia utente aggiuntivi: pulsanti e indicatori.

Nella versione 1 delle funzionalità del carosello CSS, i pulsanti e gli indicatori vengono creati da CSS. Il browser inserisce gli elementi come fratelli, con i ruoli appropriati, nell'ordine di tabulazione corretto e ne mantiene lo stato. In questo modo, è più facile sviluppare un carosello accessibile.

  • Pulsanti di scorrimento
    Elementi di scorrimento interattivi e con stato forniti dal browser <button> che facilitano l'accesso ai contenuti e consentono di scorrere l'85% di un'area di scorrimento quando vengono premuti.

  • Indicatori di scorrimento
    Elementi di navigazione <a> con stato forniti dal browser che agevolano l'accesso ai contenuti per qualsiasi elemento richiesto nell'area di scorrimento.

Il resto di questo post mostra come creare un carosello utilizzando queste nuove funzionalità.

Inizia con un selettore

Puoi aggiungere pulsanti e indicatori a qualsiasi area di scorrimento del tuo sito.

Il seguente CSS crea un'area di scorrimento di base da utilizzare nei passaggi successivi per aggiungere pulsanti e indicatori. La funzionalità di aggancio allo scorrimento non è obbligatoria per un carosello, ma in questo esempio viene utilizzata. I caroselli funzionano anche per gli elementi di scorrimento verticale e bidirezionale.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}
Un'area di scorrimento mostrata senza indicazioni o indizi diversi dal taglio dei contenuti.

Aggiungere pulsanti di scorrimento con ::scroll-button()

A seconda del sistema operativo, è possibile che siano già presenti pulsanti di scorrimento attorno alle barre di scorrimento. I pulsanti della barra di scorrimento integrati tendono a spostare un'area di scorrimento, mentre i pulsanti di scorrimento CSS coprono l'85% dell'area di scorrimento.

Per i caroselli che mostrano un solo elemento a tutta larghezza alla volta con punti di aggancio dello scorrimento, l'importo sarà visualizzato per ogni elemento. Per gli elenchi lunghi di elementi in cui sono visibili più elementi alla volta, scorre quasi una pagina intera.

Per aggiungere i pulsanti di scorrimento con CSS:

  1. Aggiungili come gli altri pseudo-elementi, con un selettore: .carousel::scroll-button(right) per un pulsante per scorrere verso destra.
  2. Specifica content con un testo alternativo di riserva accessibile facoltativo.

Il browser creerà pulsanti reali, con i tuoi contenuti al loro interno, come fratelli dello scorrevole. Ora puoi disporre questi pulsanti, personalizzarli o anchor() come preferisci. Il seguente codice CSS ne crea due, uno per un pulsante di scorrimento verso sinistra e uno per un pulsante di scorrimento verso destra.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*)::focus-visible {
    outline-offset: 5px;
  }
}
Demo

Aggiungere indicatori di scorrimento con ::scroll-marker()

Analogamente all'elemento cursore della barra di scorrimento, gli indicatori di scorrimento CSS possono suggerire le dimensioni del carosello e, al contempo, offrire la possibilità di passare rapidamente alla fine o all'inizio. Un indicatore di scorrimento CSS è diverso dalla barra di scorrimento perché ogni indicatore è un link che può rappresentare qualsiasi elemento nello scorrevole.

Un esempio di questa distinzione sono le stagioni di una serie TV. Anziché creare un indicatore per ogni una delle 10 puntate, crea due indicatori che rimandino all'inizio del capitolo.

Viene visualizzato un elenco orizzontale di puntate TV, a partire dalla puntata 1 della seconda stagione. Sopra sono presenti due titoli di elenco, Stagione 1 e Stagione 2, ciascuno con frecce che li indicano come indicatori di scorrimento generati.

Tieni presente che questi indicatori non sono punti, ma utilizzano la proprietà content: "Season 1" del loro pseudoelemento. Gli indicatori possono essere anche miniature, comunemente utilizzati per i caroselli di gallerie in siti web di e-commerce o incentrati sulle foto.

I marker sono simili ai link <a> in-page, ma hanno alcune funzionalità speciali:

  1. Includono uno stato :target-current per quando l'indicatore è visibile o agganciato.
  2. La navigazione con la tastiera è inclusa e si comporta come un gruppo di discussione.
  3. È inclusa l'esperienza con lo screen reader e report come un elenco di schede.

Aggiungi indicatori a punti di interesse significativi nello scroller seguendo questi passaggi:

  1. Definisci il posizionamento del scroll-marker-group come before o after.
  2. Seleziona i punti di interesse con un selettore .carousel .point-of-interest::scroll-marker.
  3. Specifica content con un testo alternativo di riserva accessibile facoltativo; numeri, testo, vuoto o un'immagine.

Il browser crea tutti gli indicatori e li inserisce nel contenitore del gruppo di indicatori. Questo esempio crea un indicatore vuoto per ogni <li>, per creare un punto di indicatore per ogni elemento.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}
Demo

L'elemento contenitore degli indicatori è chiamato ::scroll-marker-group e viene creato come elemento fratello dello scorrevole, proprio come i pulsanti di scorrimento. Questo contenitore può essere personalizzato e posizionato dove vuoi.

Indicatori e pulsanti contemporaneamente

Se li combini, l'esperienza avrà l'aspetto di un carosello, ma offrirà i seguenti vantaggi:

  • Funziona con JavaScript disattivato.
  • Nessuna idratazione o dimensionamento lazy (riduzione del CLS).
  • Supporta tutti i tipi di animazioni e attivatori di scorrimento.
  • L'accessibilità è inclusa.
  • Supporta tocco, mouse e tastiera.

Fai meno, raggiungi di più, più velocemente.

Demo

Risorse

In questo post ci riferiremo principalmente a queste funzionalità come "carosello", ma le loro funzionalità e utilità vanno ben oltre i casi d'uso dei caroselli. Per un quadro completo del potenziale di queste nuove funzionalità, prova la Galleria con vista a sequenza e altri componenti come scorrimento, schede e diapositive.

Per gli studenti che preferiscono i contenuti visivi e interattivi, prova Carousel Configurator.

Offre switch, ad esempio per i pulsanti di scorrimento, e quando è attivato, il carosello visualizzato mostra immediatamente i pulsanti e il CSS associato utilizzato.

Uno screenshot del sito web del configuratore che mostra uno snippet di codice HTML di un semplice elenco. Sotto l&#39;HTML sono presenti quattro opzioni: pulsanti di scorrimento, navigazione con puntini, pagine automatiche e inerte. Sotto gli switch è presente un elenco di schede, pronte per l&#39;aggiunta di qualsiasi offerta di switch.
https://chrome.dev/carousel-configurator/

Sono inclusi anche esempi di concetti più avanzati correlati ai caroselli:

Uno spazio di vetrina per chi vuole scoprire fino a che punto può utilizzare queste funzionalità, rispondendo a domande come "può fare X?". Ogni demo si basa su un caso d'uso trovato su internet. Ogni demo mostra come orchestrare questi pulsanti e indicatori con animazione basata sullo scorrimento, query scroll-state() e molto altro ancora.

Curiosità: l'intero sito è senza JavaScript.

Uno screenshot della pagina di destinazione della galleria con vista a sequenza. Deve avere un&#39;intestazione di benvenuto, alcune informazioni sul sito e un elenco di esempi di caroselli sotto forma di link.
https://chrome.dev/carousel/

Gli esempi vanno da piacevolmente semplici a incredibilmente robusti e ricchi di funzionalità. La navigazione nella galleria deve essere stimolante, rassicurante e, naturalmente, essere ispezionabile per il codice da acquisire. Cerca e controlla @layer utilities per trovare utilità che possono aiutarti a creare caroselli.

Ulteriori lavori

Siamo orgogliosi di quanto bene queste funzionalità si integrino con tutto l'HTML e il CSS. L'accessibilità di un carosello CSS è di prim'ordine. Il rendimento di un carosello CSS è migliore di qualsiasi soluzione JavaScript. L'esperienza utente di un carosello CSS è naturale, fluida e completa. Tuttavia, esistono dei modi per migliorare.

Porta i tuoi elementi

Stiamo già lavorando per consentirti di aggiungere i tuoi componenti per i pulsanti di scorrimento e gli indicatori. Ciò significa che puoi fornire i tuoi tag <a> con contenuti avanzati come le icone. Puoi anche utilizzare i tuoi pulsanti a più livelli creati con Tailwind.

Scorrimento ciclico

Molti caroselli si chiudono su se stessi quando arrivano alla fine, come può accadere con un giro su un carosello in una fiera. È una questione che abbiamo preso in considerazione e intendiamo fornire una soluzione di piattaforma.

Ci auguriamo che questa funzionalità ti piaccia. Non vediamo l'ora di offrire a tutti gli utenti web con "JavaScript disabilitato" un'esperienza scorrevole piacevole e tutte le riduzioni del CLS che si possono ottenere dal ciclo di vita più temporizzato di un carosello integrato.

Meno lavoro per te, esperienze utente straordinarie, rendimento migliore.