Pembuat Bilah Gulir CSS

Scrollbar gaya Chrome, Safari, dan Edge dengan keluarga elemen semu ::-webkit-scrollbar: aturan terpisah untuk trek, jempol, dan status hover jempol, ditambah lebar persis piksel dan radius batas jempol. Firefox mengabaikan semua itu sepenuhnya dan malah membaca dua properti standar, scrollbar-width dan scrollbar-color, yang kemudian masuk ke spesifikasi CSS Scrollbars. Ini bukan dua dialek dari fitur yang sama — ini adalah dua rangkaian fitur berbeda dengan batas atas berbeda, dan sebagian besar generator bilah gulir secara diam-diam menutupi celah tersebut dengan hanya menampilkan hasil WebKit. Yang ini tidak.

Atur lebar, warna lintasan, warna ibu jari, warna arahkan kursor, dan radius sudut ibu jari satu kali, dan alat ini akan membuat dua kumpulan aturan dari masukan yang sama. Cakupan blok WebKit ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb dan :hover state ke kotak demo sebelah kiri, jadi apa yang Anda lihat di sana persis seperti yang dirender oleh Chrome, Safari, dan Edge — mesin asli browser itu sendiri, bukan overlay yang disimulasikan. Blok Firefox menyetel lebar bilah gulir dan warna bilah gulir di kotak demo sebelah kanan menggunakan mesin peramban yang sama, itulah sebabnya kotak tersebut hanya terlihat berbeda ketika laman ini benar-benar terbuka di Firefox; di browser WebKit ia menampilkan bilah gulir defaultnya sendiri di sana, dan alat tersebut mengatakannya daripada memalsukan tampilan Firefox dengan piksel yang dipinjam.

Pemetaan lebar adalah contoh paling jelas dari kesenjangan ini: lebar bilah gulir Firefox hanya menerima kata kunci otomatis, tipis atau tidak sama sekali — tidak pernah ada angka piksel yang tepat. Generator ini memetakan lebar yang Anda pilih dengan jujur ​​(8 piksel ke bawah menjadi tipis, apa pun yang lebih lebar menjadi otomatis) dan menampilkan kata kunci yang dihasilkan di samping masukan Anda, daripada menciptakan hasil Firefox sempurna piksel palsu yang tidak ada. Firefox juga tidak memiliki cara untuk mengatur warna hover terpisah, radius batas ibu jari yang independen, atau warna trek yang bukan sekadar nilai kedua dari warna bilah gulir — ini adalah batasan platform yang nyata dan permanen, bukan kelalaian dalam alat ini.

Salin blok CSS gabungan dan kedua kumpulan aturan berjalan bersamaan, masing-masing di bawah komentarnya sendiri, siap untuk ditempelkan ke dalam stylesheet apa adanya. Semuanya dirender dan diperbarui di browser Anda sendiri saat Anda menyeret kontrol — tanpa unggahan, tanpa akun, tanpa server bolak-balik, dan tetap bekerja secara offline setelah halaman dimuat.