Адаптировать полосу прокрутки к настройкам высокой контрастности

Веб-функции: scrollbar-color запрос медиа prefers-contrast

Пользователи, которые включают режим высокой контрастности в операционной системе или браузере, ожидают, что элементы интерфейса (например, полосы прокрутки) будут хорошо видны. Часто они полагаются на резкое разделение переднего плана и фона, а не на едва заметные серые или тематические цвета.

В этом руководстве приведены необязательные инструкции по использованию медиафункции CSS @media (prefers-contrast: more) для принудительного применения стиля полосы прокрутки с высокой контрастностью.

Улучшить читаемость

При настройке полос прокрутки с помощью scrollbar-color или пользовательских переменных вы можете явно переопределить режимы высокой контрастности. Это особенно полезно, если в основной теме приложения используются низкоконтрастные полосы прокрутки.

НЕОБЯЗАТЕЛЬНО. Используйте блок @media (prefers-contrast: more), чтобы задать темные, хорошо различимые цвета для ползунка и полосы прокрутки.

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

Проблемы, о которых следует знать при использовании scrollbar-color

  • НЕ анимируйте и не преобразовывайте scrollbar-color. Из-за ошибки в WebKit полоса прокрутки мерцает каждый раз, когда меняется scrollbar-color.
  • В macOS свойства scrollbar-color (стандартное) и ::-webkit-scrollbar (устаревшее) по умолчанию игнорируются, поскольку в этой ОС используются нативные полосы прокрутки. Чтобы macOS отображала пользовательские цвета, их НЕОБХОДИМО сочетать с scrollbar-width (например, thin или auto).
  • Даже если применить scrollbar-width, оверлейные полосы прокрутки в macOS по умолчанию отображают дорожку (желоб) как прозрачную. Если дизайн требует видимого цвета фона дорожки в macOS, вы ДОЛЖНЫ применить scrollbar-gutter: stable; к прокручиваемому контейнеру, но обратите внимание, что он появляется только после того, как пользователь наводит указатель мыши на полосу прокрутки.
  • Даже если задано свойство scrollbar-gutter: stable, на устройствах с macOS дорожка может быть прозрачной. Видимость ползунка не должна зависеть от цвета дорожки.

Резервные объявления и поддержка браузеров

Резервные варианты и поддержка свойства scrollbar-color в браузерах

Эта функция представляет собой прогрессивное улучшение и не всегда требует резервных объявлений.

Если стиль важен, а целевой набор Baseline пользователя – Baseline Widely Available или более ранний, вам СЛЕДУЕТ включить нестандартные псевдоэлементы ::-webkit-scrollbar в качестве резервных.

Чтобы избежать конфликтов между стандартными свойствами и устаревшими селекторами WebKit в браузерах, которые поддерживают и то, и другое, поместите резервные объявления в блок @supports not (scrollbar-color: auto).

Если вы используете пользовательские свойства для определения цветов, они будут автоматически каскадироваться в устаревшие селекторы WebKit. Дублировать их НЕ нужно.

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