Menyesuaikan scrollbar dengan preferensi kontras tinggi

Pengguna yang mengaktifkan mode kontras tinggi di sistem operasi atau browser mereka mengharapkan elemen UI (seperti scrollbar) sangat mudah dibaca, sering kali mengandalkan pemisahan latar depan-latar belakang yang jelas, bukan warna abu-abu atau warna tema yang samar.

Panduan ini memberikan petunjuk opsional tentang cara menggunakan fitur media CSS @media (prefers-contrast: more) untuk menerapkan gaya scrollbar kontras tinggi.

Sempurnakan Keterbacaan

Saat menyesuaikan scrollbar dengan scrollbar-color atau variabel kustom, Anda dapat memberikan penggantian eksplisit untuk mode kontras tinggi. Hal ini sangat membantu jika tema aplikasi utama Anda menggunakan scrollbar kontras rendah karena alasan estetika.

OPSIONAL: Gunakan blok @media (prefers-contrast: more) untuk menentukan warna gelap dan berbeda untuk thumb dan track.

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

Masalah yang perlu diperhatikan saat menggunakan scrollbar-color

• JANGAN menganimasikan atau mentransisikan scrollbar-color. Bug WebKit menyebabkan scrollbar berkedip setiap kali scrollbar-color berubah.
• Di macOS, properti scrollbar-color (standar) dan ::-webkit-scrollbar (lama) diabaikan secara default karena macOS menggunakan scrollbar "overlay" native. Anda HARUS menyambungkan warna kustom dengan scrollbar-width (misalnya, thin atau auto) untuk memaksa macOS merendernya.
• Meskipun scrollbar-width diterapkan, scrollbar overlay macOS merender jalur (gutter) sebagai transparan secara default. Jika desain memerlukan warna latar belakang trek yang terlihat di MacOS, Anda HARUS menerapkan scrollbar-gutter: stable; ke penampung yang dapat di-scroll, tetapi perhatikan bahwa warna tersebut hanya muncul setelah pengguna mengarahkan kursor ke scrollbar.
• Meskipun dengan scrollbar-gutter: stable, trek mungkin transparan di MacOS. Thumb tidak boleh bergantung pada warna trek agar terlihat.

Penggantian & Dukungan Browser

Penggantian & dukungan browser untuk scrollbar-color

Fitur ini adalah progressive enhancement dan tidak selalu memerlukan penggantian.

Jika gaya visual penting dan target Baseline pengguna adalah "Baseline Tersedia Luas" atau yang lebih lama, Anda HARUS menyertakan elemen semu ::-webkit-scrollbar non-standar sebagai pengganti.

Gabungkan penggantian lama dalam blok @supports not (scrollbar-color: auto) untuk mencegah konflik antara properti standar dan pemilih WebKit lama di browser yang mendukung keduanya secara native.

Jika Anda menggunakan properti kustom untuk menentukan warna, properti ini akan otomatis diwariskan ke pemilih WebKit lama. Anda TIDAK perlu menduplikasinya.

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