Dostosuj pasek przewijania do preferencji dotyczących wysokiego kontrastu

Użytkownicy, którzy włączają tryby wysokiego kontrastu w systemie operacyjnym lub przeglądarce, oczekują, że elementy interfejsu (takie jak paski przewijania) będą bardzo czytelne. Często polegają na wyraźnym oddzieleniu pierwszego planu od tła, a nie na subtelnych szarościach czy kolorach motywu.

Ten przewodnik zawiera opcjonalne instrukcje dotyczące używania funkcji multimedialnej CSS @media (prefers-contrast: more) do wymuszania stylizacji paska przewijania o wysokim kontraście.

Ulepsz czytelność

Podczas dostosowywania pasków przewijania za pomocą scrollbar-color lub zmiennych niestandardowych możesz podać wyraźne zastąpienie dla trybów wysokiego kontrastu. Jest to szczególnie przydatne, jeśli główny motyw aplikacji ze względów estetycznych używa pasków przewijania o niskim kontraście.

OPCJONALNIE: użyj bloku @media (prefers-contrast: more), aby zdefiniować ciemne, wyraźne kolory suwaka i paska.

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

Problemy, o których warto pamiętać podczas używania właściwości scrollbar-color

• NIE animuj ani nie zmieniaj scrollbar-color. Błąd WebKit powoduje migotanie paska przewijania przy każdej zmianie scrollbar-color.
• W systemie macOS właściwości scrollbar-color (standardowe) i ::-webkit-scrollbar (starsze) są domyślnie ignorowane, ponieważ system macOS używa natywnych pasków przewijania „nakładki”. MUSISZ połączyć spersonalizowane kolory z scrollbar-width (np. thin lub auto), aby wymusić ich renderowanie w systemie macOS.
• Nawet po zastosowaniu właściwości scrollbar-width nakładane paski przewijania w systemie macOS domyślnie renderują ścieżkę (rynienkę) jako przezroczystą. Jeśli projekt wymaga widocznego koloru tła ścieżki w systemie macOS, MUSISZ zastosować scrollbar-gutter: stable; do kontenera z możliwością przewijania, ale pamiętaj, że pojawi się on dopiero po najechaniu kursorem na pasek przewijania.
• Nawet przy ustawieniu scrollbar-gutter: stable ścieżka może być przezroczysta w systemie MacOS. Widoczność suwaka nie powinna zależeć od koloru ścieżki.

Kreacje zastępcze i obsługa przeglądarek

Zastępcze i obsługiwane przez przeglądarki kolory paska przewijania

Ta funkcja jest progresywnym ulepszeniem i nie zawsze wymaga kreacji zastępczych.

Jeśli styl jest ważny, a docelowa wersja Baseline użytkownika to „Baseline Widely Available” lub wcześniejsza, POWINNO się uwzględnić niestandardowe pseudoelementy ::-webkit-scrollbar jako kreacje zastępcze.

Umieść starsze kreacje zastępcze w bloku @supports not (scrollbar-color: auto), aby uniknąć konfliktów między właściwościami standardowymi a starszymi selektorami WebKit w przeglądarkach, które obsługują oba te rozwiązania.

Jeśli do definiowania kolorów używasz właściwości niestandardowych, zostaną one automatycznie zastosowane do starszych selektorów WebKit. NIE musisz ich duplikować.

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