Scrollleiste an Einstellungen für hohen Kontrast anpassen

Nutzer, die in ihrem Betriebssystem oder Browser Modi mit hohem Kontrast aktivieren, erwarten, dass UI-Elemente (wie Scrollleisten) sehr gut lesbar sind. Sie verlassen sich oft auf eine starke Trennung von Vorder- und Hintergrund und nicht auf subtile Grautöne oder Designfarben.

In diesem Leitfaden finden Sie optionale Anleitungen zur Verwendung des CSS-Medienfeatures @media (prefers-contrast: more), um ein kontrastreiches Scrollleisten-Styling zu erzwingen.

Lesbarkeit optimieren

Wenn Sie Scrollleisten mit scrollbar-color oder benutzerdefinierten Variablen anpassen, können Sie eine explizite Überschreibung für Modi mit hohem Kontrast angeben. Das ist besonders hilfreich, wenn das primäre Design Ihrer Anwendung aus ästhetischen Gründen Scrollleisten mit geringem Kontrast verwendet.

OPTIONAL: Verwenden Sie einen @media (prefers-contrast: more)-Block, um dunkle, unterschiedliche Farben für den Schieberegler und die Schiene zu definieren.

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

Probleme bei der Verwendung von „scrollbar-color“

• scrollbar-color darf NICHT animiert oder mit Übergängen versehen werden. Ein WebKit-Fehler führt dazu, dass die Bildlaufleiste jedes Mal flackert, wenn sich scrollbar-color ändert.
• Unter macOS werden die Eigenschaften scrollbar-color (Standard) und ::-webkit-scrollbar (Legacy) standardmäßig ignoriert, da macOS native „Overlay“-Scrollleisten verwendet. Sie MÜSSEN benutzerdefinierte Farben mit scrollbar-width (z.B. thin oder auto) koppeln, damit macOS sie rendert.
• Auch wenn scrollbar-width angewendet wird, wird die Spur (der Zwischenraum) bei macOS-Overlay-Scrollleisten standardmäßig transparent dargestellt. Wenn das Design unter macOS eine sichtbare Hintergrundfarbe für die Bildlaufleiste erfordert, MÜSSEN Sie scrollbar-gutter: stable; auf den scrollbaren Container anwenden. Beachten Sie jedoch, dass die Hintergrundfarbe erst angezeigt wird, wenn der Nutzer den Mauszeiger auf die Bildlaufleiste bewegt.
• Selbst mit scrollbar-gutter: stable kann der Track unter macOS transparent sein. Die Sichtbarkeit des Schiebereglers sollte nicht von der Farbe der Schiene abhängen.

Fallbacks und Browserunterstützung

Fallbacks und Browserunterstützung für „scrollbar-color“

Diese Funktion ist eine progressive Verbesserung und erfordert nicht immer Fallbacks.

Wenn das Styling wichtig ist und das Baseline-Ziel des Nutzers „Baseline – allgemein verfügbar“ oder früher ist, SOLLTEN Sie die nicht standardmäßigen ::-webkit-scrollbar-Pseudoelemente als Fallbacks einfügen.

Setzen Sie Legacy-Fallbacks in einen @supports not (scrollbar-color: auto)-Block, um Konflikte zwischen Standard-Properties und Legacy-WebKit-Selektoren in Browsern zu vermeiden, die beide nativ unterstützen.

Wenn Sie benutzerdefinierte Eigenschaften verwenden, um Farben zu definieren, werden diese automatisch auf die alten WebKit-Selektoren übertragen. Sie müssen sie NICHT duplizieren.

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