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 delle molte diverse esperienze di scorrimento e carosello create utilizzando queste nuove funzionalità e senza JavaScript. Guarda il video seguente e scopri cosa puoi fare ora.

Nel video viene mostrata un'armonia di pulsanti di scorrimento, indicatori di scorrimento, animazione basata sullo scorrimento, query scroll-state(), :has(), griglia, ancoraggio e molto altro ancora.

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

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

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

Un carosello è un'area di scorrimento con un massimo di due affordance dell'interfaccia utente aggiuntive: pulsanti e indicatori.

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

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

• Indicatori di scorrimento
  Elementi di navigazione con stato <a> forniti dal browser che facilitano 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 uno scroller

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. Lo scorrimento agganciato non è obbligatorio per un carosello, ma in questo esempio viene utilizzato. I caroselli funzionano anche per gli scorrimenti verticali e bidirezionali.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

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

A seconda del sistema operativo, potrebbero essere già presenti pulsanti di scorrimento intorno alle barre di scorrimento. I pulsanti della barra di scorrimento integrata tendono a spostare un'area di scorrimento, mentre i pulsanti di scorrimento CSS spostano la pagina all'85% dell'area di scorrimento.

Per i caroselli che mostrano un solo elemento a tutta larghezza alla volta con punti di scorrimento, questo sembrerà un importo per elemento. Per gli elenchi lunghi di elementi in cui sono visibili più elementi contemporaneamente, lo scorrimento avviene quasi a pagina intera.

Per aggiungere pulsanti di scorrimento con CSS:

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

Il browser creerà pulsanti reali, con i tuoi contenuti all'interno, come elementi secondari dello scorrimento. Ora puoi disporre questi pulsanti, applicare uno stile o anchor() in base alle tue esigenze. Il seguente codice CSS crea due pulsanti, uno per lo scorrimento a sinistra e uno per lo scorrimento a destra.

.carousel {
  …

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

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

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

Simili all'elemento di trascinamento della barra di scorrimento, gli indicatori di scorrimento CSS possono suggerire le dimensioni del carosello e fornire anche la possibilità di spostarsi 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 scorrimento.

Per fare un esempio di questa distinzione, considera le stagioni di una serie TV. Anziché creare un marcatore per ciascuno dei 10 episodi, crea 2 marcatori che rimandano all'inizio del capitolo.

Nota che questi marcatori non sono punti, ma utilizzano la proprietà content: "Season 1" del relativo pseudo-elemento. I marcatori possono anche essere miniature, comunemente utilizzate per i caroselli della galleria nei siti web di e-commerce o incentrati sulle foto.

I marcatori sono simili ai link <a> nella pagina, ma hanno alcune funzionalità speciali:

1. Sono inclusi uno stato :target-current per quando il marcatore è in visualizzazione o agganciato.
2. La navigazione da tastiera è inclusa e si comporta come un focus group.
3. L'esperienza di screen reader è inclusa, così come i report come un elenco di schede.

Aggiungi indicatori ai punti di interesse significativi nello scorrimento seguendo questi passaggi:

1. Definisci il posizionamento di 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 testo alternativo di riserva accessibile facoltativo: numeri, testo, vuoto o un'immagine.

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

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

L'elemento contenitore dei marcatori è chiamato ::scroll-marker-group e viene creato come elemento di pari livello dello scorrimento, proprio come i pulsanti di scorrimento. Questo contenitore può essere formattato e posizionato ovunque ti serva.

Marcatori e pulsanti contemporaneamente

Metti insieme i due elementi e l'esperienza assomiglia a un carosello, ma presenta i seguenti vantaggi:

• Funziona con JavaScript disattivato.
• Nessuna idratazione o dimensionamento pigro (riduzione del CLS).
• Pronto per tutti i tipi di animazione di scorrimento e trigger.
• L'accessibilità è inclusa.
• Compatibile con tocco, mouse e tastiera.

Fai meno cose, raggiungi più persone, più velocemente.

Risorse

Questo post si riferisce principalmente a queste funzionalità come "carosello", ma le loro capacità e la loro utilità vanno ben oltre i casi d'uso del carosello. Per avere un quadro completo del potenziale di queste nuove funzionalità, prova la galleria con vista a sequenza e altri componenti come: scrollspy, schede e slide.

• Standard web
  • CSS Overflow 5
  • Carousel Explainer
  • WAI Aria Carousel
• Chrome
  • Intenzione di spedizione
  • Galleria con vista a sequenza
  • Configuratore carosello

Configuratore carosello

Per gli studenti che preferiscono l'apprendimento visivo e interattivo, prova lo strumento di configurazione del carosello.

Offre interruttori, ad esempio per i pulsanti di scorrimento, e quando è attivato il carosello mostrato ha immediatamente i pulsanti visualizzati più il CSS associato utilizzato.

Include anche esempi di concetti più avanzati adiacenti al carosello:

• interattività
• scroll-state
• animazione basata sullo scorrimento
• e colonne con scorrimento rapido.

Galleria con vista a sequenza

Uno spazio di dimostrazione per chi è curioso di scoprire il potenziale di 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 l'animazione basata sullo scorrimento, le query scroll-state() e molto altro ancora.

Curiosità: l'intero sito non utilizza JavaScript.

Gli esempi vanno da quelli deliziosamente semplici a quelli fantasticamente robusti e ricchi di funzionalità. La navigazione nella galleria deve essere fonte di ispirazione, rassicurante e, naturalmente, deve consentire di ispezionare il codice da utilizzare. Trova e ispeziona @layer utilities per le utilità che possono aiutarti a creare caroselli.

Ulteriori lavori

Siamo orgogliosi di quanto bene si integrino queste funzionalità con HTML e 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 ricca. Tuttavia, esistono modi per migliorare.

Porta i tuoi elementi

Stiamo già lavorando per consentirti di aggiungere i tuoi componenti per i pulsanti di scorrimento e i marcatori. Ciò significa che potresti 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 avvolgono su se stessi quando arrivano alla fine, come una giostra di una fiera. Siamo a conoscenza di questo problema e intendiamo fornire una soluzione per la piattaforma.

Ci auguriamo che questa funzionalità sia di tuo gradimento. Non vediamo l'ora che tutti gli utenti web con JavaScript disattivato possano usufruire di una piacevole esperienza di scorrimento e che si verifichi una riduzione del CLS grazie al ciclo di vita meglio sincronizzato di una giostra integrata.

Meno lavoro per te, esperienze utente ottimali, prestazioni migliori.