⭐ 0
🔍
Teks Imej PDF & Dokumen Audio Muzik elektronik Masa Utiliti Pengesah Esoterik Permainan

Penjana Bar Skrol CSS

Gayakan lebar, trek, ibu jari dan warna hover bar skrol, kemudian lihat hasil WebKit sebenar di sebelah hasil Firefox sebenar — dua sistem pelayar yang benar-benar berbeza, bersebelahan.

🔒 Diproses sepenuhnya dalam penyemak imbas anda — tiada apa yang anda masukkan di sini pernah dimuat naik.

10px
8px

Digayakan dengan pseudo-elemen ::-webkit-scrollbar — kotak ini dipaparkan melalui enjin sebenar pelayar anda sendiri jika ia Chrome, Safari atau Edge.

Digayakan dengan sifat scrollbar-width dan scrollbar-color Firefox. Pelayar lain mengabaikan ini dan menunjukkan bar skrol lalai mereka sendiri di sini — buka halaman ini dalam Firefox untuk melihat hasil sebenar.

Firefox tiada warna hover berasingan, jejari sempadan ibu jari atau penggayaan trek bebas — hanya scrollbar-width, dipetakan di sini daripada ketebalan pilihan anda kepada kata kunci sebenar: thin

Memproses... 0%

Keputusan

Chrome, Safari dan Edge menggayakan bar skrol dengan keluarga ::-webkit-scrollbar unsur semu: peraturan berasingan untuk trek, ibu jari, dan keadaan hover ibu jari, ditambah dengan lebar tepat piksel dan jejari sempadan ibu jari. Firefox mengabaikan semuanya itu dan sebaliknya membaca dua sifat piawai, scrollbar-width dan scrollbar-color, yang kemudiannya memasuki spesifikasi CSS Scrollbars. Ini bukanlah dua dialek bagi ciri yang sama — ia adalah dua set ciri berbeza dengan siling berbeza, dan kebanyakan penjana bar skrol secara senyap menutup jurang itu dengan hanya menunjukkan hasil WebKit. Alat ini tidak.

Tetapkan lebar, warna trek, warna ibu jari, warna hover dan jejari sudut ibu jari sekali, dan alat ini membina dua set peraturan daripada input yang sama. Blok WebKit menskop ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb dan keadaan :hovernya ke kotak demo kiri, jadi apa yang anda lihat di sana adalah tepat seperti yang dipaparkan oleh Chrome, Safari dan Edge — enjin sebenar pelayar itu sendiri, bukan tindanan simulasi. Blok Firefox menetapkan scrollbar-width dan scrollbar-color pada kotak demo kanan menggunakan enjin pelayar yang sama itu sendiri, itulah sebabnya kotak itu hanya kelihatan berbeza apabila halaman ini benar-benar dibuka dalam Firefox; dalam pelayar WebKit ia menunjukkan bar skrol lalainya sendiri di sana, dan alat ini menyatakannya daripada memalsukan rupa Firefox dengan piksel pinjaman.

Pemetaan lebar adalah contoh paling jelas tentang jurang itu: scrollbar-width Firefox hanya menerima kata kunci auto, thin atau none — tidak pernah angka piksel yang tepat. Penjana ini memetakan lebar pilihan anda dengan jujur (8px ke bawah menjadi thin, yang lebih lebar menjadi auto) dan memaparkan kata kunci yang terhasil di sebelah input anda, daripada mencipta hasil Firefox tepat piksel palsu yang tidak wujud. Firefox juga tidak mempunyai cara untuk menetapkan warna hover yang berasingan, jejari sempadan ibu jari bebas, atau warna trek yang bukan sekadar nilai kedua scrollbar-color — ini adalah batasan nyata yang kekal bagi platform ini, bukan peninggalan dalam alat ini.

Salin blok CSS gabungan dan kedua-dua set peraturan bergerak bersama, setiap satunya di bawah ulasan sendiri, sedia untuk ditampal ke dalam helaian gaya terus. Semuanya dipaparkan dan dikemas kini dalam pelayar anda sendiri semasa anda melaraskan kawalan — tiada muat naik, tiada akaun, tiada perjalanan pergi balik pelayan, dan ia terus berfungsi di luar talian setelah halaman dimuatkan.

Seronok menggunakan alat ini? Rasa produk ini berguna? Nampak potensi di dalamnya dan ingin menyokongnya?

🛡️
Dilaksanakan Dalam Pelayar

Fail dan input anda tidak pernah meninggalkan peranti ini. Pemprosesan berjalan sepenuhnya luar talian. 100% Selamat.

Format & Peraturan Diterima

  • Kawalan kongsi — lebar, warna trek, warna ibu jari, warna hover, jejari sudut ibu jari — memacu kedua-dua enjin daripada input yang sama.
  • Pemetaan lebar bar skrol yang jujur: Firefox hanya menyokong thin, auto atau none, jadi nilai piksel tepat yang anda pilih dipetakan kepada kata kunci sebenar yang paling hampir dan dipaparkan di sebelah input anda.
  • Output CSS gabungan yang boleh disalin dengan kedua-dua peraturan unsur semu WebKit dan sifat piawai Firefox, diulas dengan jelas.

Faedah Utama

✓ Dua kotak demo langsung memaparkan bar skrol sebenar setiap enjin — kotak WebKit sentiasa menunjukkan hasil sebenar dalam Chrome, Safari dan Edge, tanpa sebarang pemalsuan paparan.
✓ Jurang keupayaan Firefox ditunjukkan, bukan disembunyikan: warna hover, jejari ibu jari dan gaya trek bebas tidak wujud dalam Firefox, dan alat ini menyatakannya secara terus-terang tanpa berpura-pura sebaliknya.
✓ Satu blok CSS yang boleh disalin menggabungkan kedua-dua set peraturan bersama-sama dengan ulasan sandaran, sedia untuk ditampal terus.

Kes Penggunaan

  • • Gayakan bar skrol bar sisi papan pemuka agar sepadan dengan palet jenama sambil melihat sejauh mana gayaan itu berfungsi dalam Firefox sebelum ia digunakan secara langsung.
  • • Dapatkan kata kunci scrollbar-width Firefox yang tepat untuk ketebalan yang dipilih, bukannya mengagak sama ada thin atau auto yang lebih hampir sepadan.
  • • Salin satu blok CSS yang mengandungi kedua-dua peraturan pseudo-elemen WebKit dan ciri standard Firefox, setiap satunya diulas dengan jelas, terus ke dalam helaian gaya.