Adapter la barre de défilement aux préférences de contraste élevé

Les utilisateurs qui activent les modes de contraste élevé dans leur système d'exploitation ou leur navigateur s'attendent à ce que les éléments d'interface utilisateur (comme les barres de défilement) soient extrêmement lisibles. Ils s'appuient souvent sur une séparation nette entre le premier plan et l'arrière-plan plutôt que sur des nuances de gris ou des couleurs de thème subtiles.

Ce guide fournit des instructions facultatives sur l'utilisation de la fonctionnalité multimédia CSS @media (prefers-contrast: more) pour appliquer un style de barre de défilement à contraste élevé.

Améliorer la lisibilité

Lorsque vous personnalisez les barres de défilement avec scrollbar-color ou des variables personnalisées, vous pouvez fournir un remplacement explicite pour les modes à contraste élevé. Cela est particulièrement utile si le thème principal de votre application utilise des barres de défilement à faible contraste pour des raisons esthétiques.

FACULTATIF : Utilisez un bloc @media (prefers-contrast: more) pour définir des couleurs sombres et distinctes pour le curseur et la piste.

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

Problèmes à prendre en compte lors de l'utilisation de scrollbar-color

• N'animez PAS scrollbar-color et n'utilisez PAS de transition. Un bug WebKit fait clignoter la barre de défilement chaque fois que scrollbar-color change.
• Sur macOS, les propriétés scrollbar-color (standard) et ::-webkit-scrollbar (ancienne) sont ignorées par défaut, car macOS utilise des barres de défilement "superposées" natives. Vous DEVEZ associer les couleurs personnalisées à scrollbar-width (par exemple, thin ou auto) pour forcer macOS à les afficher.
• Même lorsque scrollbar-width est appliqué, les barres de défilement en superposition de macOS affichent la piste (gouttière) comme transparente par défaut. Si la conception nécessite une couleur d'arrière-plan de piste visible sur macOS, vous DEVEZ appliquer scrollbar-gutter: stable; au conteneur à faire défiler, mais notez qu'elle n'apparaît que lorsque l'utilisateur pointe sur la barre de défilement.
• Même avec scrollbar-gutter: stable, la piste peut être transparente sur macOS. Le curseur ne doit pas dépendre de la couleur de la piste pour être visible.

Créations de remplacement et navigateurs compatibles

Solutions de remplacement et compatibilité des navigateurs pour scrollbar-color

Cette fonctionnalité est une amélioration progressive et ne nécessite pas toujours de créations de remplacement.

Si le style est important et que la cible Baseline de l'utilisateur est "Baseline Widely Available" ou une version antérieure, vous DEVEZ inclure les pseudo-éléments non standards ::-webkit-scrollbar en tant que solutions de secours.

Encapsulez les solutions de remplacement d'anciennes versions dans un bloc @supports not (scrollbar-color: auto) pour éviter les conflits entre les propriétés standards et les anciens sélecteurs WebKit dans les navigateurs qui sont compatibles avec les deux de manière native.

Si vous utilisez des propriétés personnalisées pour définir des couleurs, elles seront automatiquement appliquées aux sélecteurs WebKit hérités. Vous n'avez PAS besoin de les dupliquer.

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