Adatta la barra di scorrimento alle preferenze di contrasto elevato

Gli utenti che attivano le modalità ad alto contrasto nel sistema operativo o nel browser si aspettano che gli elementi UI (come le barre di scorrimento) siano estremamente leggibili, spesso facendo affidamento su una netta separazione tra primo piano e sfondo anziché su grigi tenui o colori del tema.

Questa guida fornisce istruzioni facoltative su come utilizzare la funzionalità multimediale CSS @media (prefers-contrast: more) per applicare lo stile della barra di scorrimento ad alto contrasto.

Migliora la leggibilità

Quando personalizzi le barre di scorrimento con scrollbar-color o variabili personalizzate, puoi fornire un override esplicito per le modalità ad alto contrasto. Ciò è particolarmente utile se il tema principale dell'applicazione utilizza barre di scorrimento a basso contrasto per motivi estetici.

FACOLTATIVO: utilizza un blocco @media (prefers-contrast: more) per definire colori scuri e distinti per il cursore e la barra.

/* Define default standard colors as variables */
.scroller {
  --scrollbar-thumb: #bbb;
  --scrollbar-track: #f1f1f1;

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

/* OPTIONAL: Provide clear, high-contrast overrides */
@media (prefers-contrast: more) {
  .scroller {
    /* Use extremely distinct colors like solid black against white */
    --scrollbar-thumb: #000000;
    --scrollbar-track: #ffffff;
  }
}

Problemi da tenere presenti quando si utilizza scrollbar-color

• NON animare o applicare transizioni a scrollbar-color. Un bug di WebKit fa lampeggiare la barra di scorrimento ogni volta che scrollbar-color cambia.
• Su macOS, le proprietà scrollbar-color (standard) e ::-webkit-scrollbar (legacy) vengono ignorate per impostazione predefinita perché macOS utilizza barre di scorrimento "overlay" native. DEVI accoppiare i colori personalizzati con scrollbar-width (ad es. thin o auto) per forzare macOS a eseguirne il rendering.
• Anche con l'applicazione di scrollbar-width, le barre di scorrimento in overlay di macOS mostrano la barra (gutter) come trasparente per impostazione predefinita. Se il design richiede un colore di sfondo visibile della barra di scorrimento su MacOS, DEVI applicare scrollbar-gutter: stable; al contenitore scorrevole, ma tieni presente che viene visualizzato solo dopo che l'utente passa il mouse sopra la barra di scorrimento.
• Anche con scrollbar-gutter: stable, la traccia potrebbe essere trasparente su MacOS. Il cursore non deve dipendere dal colore della barra per essere visibile.

Alternative e supporto del browser

Alternative e supporto del browser per scrollbar-color

Questa funzionalità è un potenziamento progressivo e non richiede sempre i fallback.

Se lo stile è importante e il target Baseline dell'utente è "Baseline ampiamente disponibile" o precedente, DEVI includere gli pseudo-elementi ::-webkit-scrollbar non standard come fallback.

Racchiudi i fallback legacy in un blocco @supports not (scrollbar-color: auto) per evitare conflitti tra le proprietà standard e i selettori WebKit legacy nei browser che supportano entrambi in modo nativo.

Se utilizzi proprietà personalizzate per definire i colori, questi verranno applicati automaticamente ai selettori WebKit legacy. NON è necessario duplicarli.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}