Tatal-warna - Trik CSS

Anonim

The scrollbar-colorharta mengawal dua warna scrollbar: yang warna ibu jari dan warna laluan . scrollbar-coloradalah sebahagian daripada draf Modul SkrolBars Kumpulan Kerja CSS Tahap 1, yang masih dalam proses penulisan ini.

Sebelum ini scrollbar-color, pengembang tidak memiliki cara standar untuk mengubah penampilan lalai bar tatal penyemak imbas tanpa menggunakan menyembunyikan bar tatal melalui overflow: hiddendan membuat bar tatal berasaskan JavaScript atau menggunakan atribut bar tatal awalan penyemak imbas. Di scrollbar-colorsisi lain, kita dapat menggayakan bar tatal agar sesuai dengan reka bentuk tanpa menggunakan semula fungsi penyemak imbas atau menggunakan awalan vendor.

.scrollable-element ( scrollbar-color: red yellow; )
Menjadi liar dengan warna tersuai

scrollbar-colorjuga akan menerima nilai darkdan lightsesuai dengan pilihan pengguna jika mereka menggunakan sesuatu seperti mod gelap pada Mac OSX.

.scrollable-element ( scrollbar-color: dark; )

Sehingga Mac 2019, sokongan darkdan lightnilai tidak tersedia di penyemak imbas mana pun. disokong dalam Firefox. Lihat bahagian sokongan penyemak imbas di bawah untuk maklumat lanjut.

Sintaks

scrollbar-color: auto | dark | light | ;

Nilai

scrollbar-color menerima nilai berikut:

  • auto adalah nilai lalai dan akan menjadikan warna bar tatal standard untuk ejen pengguna.
  • dark akan memberitahu ejen pengguna untuk menggunakan bar tatal yang lebih gelap agar sesuai dengan skema warna semasa.
  • light akan memberitahu ejen pengguna untuk menggunakan bar tatal yang lebih ringan agar sesuai dengan skema warna semasa.
  • menentukan dua warna yang akan digunakan untuk bar tatal. Warna pertama adalah untuk "ibu jari" atau bahagian bar tatal yang boleh dipindahkan yang muncul di atas. Warna kedua adalah untuk "trek" atau bahagian tetap dari bar tatal.

Contohnya

Ini menggabungkan sintaks spesifikasi baru dan bahan awalan WebKit.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
91 * 87 11 88 * TP *

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 * Tidak 81 * 14.0-14.4 *

Berkaitan

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Sumber

  • Keadaan Semasa Skrol Bergaya
  • Bar tatal tersuai di WebKit
  • Draf Modul CSSWG Scrollbars
  • Koleksi kes penggunaan W3C untuk pengubahsuaian bar tatal
  • Masa Depan CSS: Bar tatal pada dev.to
  • Isu Chromium 891944