Scrollbalk aanpassen aan voorkeuren voor hoog contrast

Gebruikers die modi met hoog contrast aanzetten in hun besturingssysteem of browser, verwachten dat UI-elementen (zoals scrollbalken) extreem goed leesbaar zijn. Ze vertrouwen vaak op een scherpe scheiding tussen voorgrond en achtergrond in plaats van subtiele grijstinten of themakleuren.

In deze handleiding vind je optionele instructies voor het gebruik van de CSS-mediafunctie @media (prefers-contrast: more) om scrollbalkstijlen met hoog contrast af te dwingen.

Leesbaarheid verbeteren

Als je scrollbalken aanpast met scrollbar-color of vrije variabelen, kun je een expliciete overschrijving bieden voor modi voor hoog contrast. Dit is vooral handig als het primaire thema van je app om esthetische redenen scrollbalken met een laag contrast gebruikt.

OPTIONEEL: Gebruik een @media (prefers-contrast: more)-blok om donkere, duidelijke kleuren te definiëren voor de duim en het spoor.

/* 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;
  }
}

Problemen om rekening mee te houden bij het gebruik van scrollbar-color

• Gebruik GEEN animaties of overgangen voor scrollbar-color. Door een WebKit-bug flikkert de schuifbalk elke keer dat scrollbar-color verandert.
• Op macOS worden de eigenschappen scrollbar-color (standaard) en ::-webkit-scrollbar (verouderd) standaard genegeerd, omdat macOS systeemeigen overlay-scrollbalken gebruikt. Je MOET aangepaste kleuren koppelen aan scrollbar-width (bijvoorbeeld thin of auto) om macOS te dwingen ze weer te geven.
• Zelfs als scrollbar-width is toegepast, geven macOS-overlayscrollbalken de track (goot) standaard transparant weer. Als het ontwerp een zichtbare achtergrondkleur voor de track vereist op MacOS, MOET je scrollbar-gutter: stable; toepassen op de scrollbare container. Houd er rekening mee dat deze alleen verschijnt nadat de gebruiker de cursor op de scrollbalk heeft geplaatst.
• Zelfs met scrollbar-gutter: stable kan de track transparant zijn op MacOS. De duim mag niet afhankelijk zijn van de trackkleur om zichtbaar te zijn.

Fallbacks en browserondersteuning

Fallbacks en browserondersteuning voor scrollbar-color

Deze functie is een progressive enhancement en vereist niet altijd fallbacks.

Als de stijl belangrijk is en het Baseline-doel van de gebruiker Baseline Algemeen beschikbaar of eerder is, MOET je de niet-standaard pseudo-elementen ::-webkit-scrollbar opnemen als fallbacks.

Plaats verouderde fallbacks in een @supports not (scrollbar-color: auto)-blok om conflicten te voorkomen tussen standaardproperty's en verouderde WebKit-selectors in browsers die beide systeemeigen ondersteunen.

Als u aangepaste eigenschappen gebruikt om kleuren te definiëren, worden deze automatisch overgenomen door de verouderde WebKit-selectors. U hoeft ze NIET te dupliceren.

/* 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);
  }
}