オペレーティング システムやブラウザで高コントラスト モードを有効にしているユーザーは、UI 要素（スクロールバーなど）が非常に読みやすいことを期待しています。多くの場合、微妙なグレーやテーマカラーではなく、前景と背景がはっきりと区別されることを期待しています。
このガイドでは、@media (prefers-contrast: more) CSS メディア機能を使用して高コントラストのスクロールバー スタイルを適用する方法について説明します。
読みやすさを向上させる
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 疑似要素を含めるべきです。
以前のフォールバックを @supports not (scrollbar-color: auto) ブロックでラップして、標準プロパティと以前の WebKit セレクタの両方をネイティブにサポートするブラウザで、それらの競合を防ぎます。
カスタム プロパティを使用して色を定義している場合、それらの色は以前の 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);
}
}