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

Penjana Bar Tatal CSS

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

10px
8px

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

Digayakan dengan ciri lebar bar skrol dan warna bar skrol Firefox. Pelayar lain mengabaikan ini dan menunjukkan bar skrol lalai mereka sendiri di sini — buka halaman ini dalam Firefox untuk melihat hasil sebenar.

Firefox tidak mempunyai warna tuding berasingan, jejari sempadan ibu jari atau penggayaan trek bebas — hanya lebar bar skrol, dipetakan di sini daripada ketebalan pilihan anda kepada kata kunci sebenar: thin

Memproses... 0%

Hasilnya

Bar skrol gaya Chrome, Safari dan Edge dengan keluarga elemen pseudo-elemen ::-webkit-scrollbar: peraturan berasingan untuk trek, ibu jari dan keadaan tuding ibu jari, ditambah dengan lebar tepat piksel dan jejari sempadan ibu jari. Firefox mengabaikan semua itu sepenuhnya dan sebaliknya membaca dua sifat standard, lebar bar skrol dan warna bar skrol, yang kemudiannya memasuki spesifikasi Bar Tatal CSS. Ini bukan dua dialek dengan ciri yang sama — ia adalah dua set ciri berbeza dengan siling yang berbeza, dan kebanyakan penjana bar skrol secara senyap-senyap menulis di atas jurang dengan hanya menunjukkan hasil WebKit. Yang ini tidak.

Tetapkan lebar, warna trek, warna ibu jari, warna tuding dan jejari sudut ibu jari sekali, dan alat membina dua set peraturan daripada input yang sama. Skop blok WebKit ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb dan keadaan :hover ke kotak tunjuk cara kiri, jadi apa yang anda lihat di sana ialah apa yang Chrome, Safari dan Edge render — enjin sebenar penyemak imbas sendiri, bukan tindanan simulasi. Blok Firefox menetapkan lebar bar skrol dan warna bar skrol pada kotak demo kanan menggunakan enjin penyemak imbas yang sama, itulah sebabnya kotak itu hanya kelihatan berbeza apabila halaman ini sebenarnya dibuka dalam Firefox; dalam penyemak imbas WebKit ia menunjukkan bar skrol lalainya sendiri di sana, dan alat itu berkata begitu daripada memalsukan rupa Firefox dengan piksel yang dipinjam.

Pemetaan lebar ialah contoh jurang yang paling jelas: Lebar bar skrol Firefox hanya menerima kata kunci secara automatik, nipis atau tiada — bukan angka piksel yang tepat. Penjana ini memetakan lebar pilihan anda dengan jujur ​​(8px ke bawah menjadi nipis, apa-apa yang lebih lebar menjadi automatik) dan memaparkan kata kunci yang terhasil di sebelah input anda, dan bukannya mencipta hasil Firefox sempurna piksel palsu yang tidak wujud. Firefox juga tidak mempunyai cara untuk menetapkan warna tuding yang berasingan, jejari sempadan ibu jari bebas atau warna trek yang bukan sekadar nilai kedua warna bar skrol — ini adalah pengehadan platform yang kekal, bukan peninggalan dalam alat ini.

Salin blok CSS gabungan dan kedua-dua set peraturan bergerak bersama-sama, setiap satu di bawah ulasannya sendiri, sedia untuk tampal ke dalam lembaran gaya sebagaimana adanya. Semuanya dipaparkan dan dikemas kini dalam penyemak imbas anda sendiri semasa anda menyeret kawalan — tiada muat naik, tiada akaun, tiada pelayan pergi-balik dan ia terus berfungsi di luar talian apabila halaman dimuatkan.

🛡️
Dilaksanakan dalam Pelayar

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

Format & Peraturan yang Diterima

  • Kawalan dikongsi — lebar, warna trek, warna ibu jari, warna tuding, jejari sudut ibu jari — memacu kedua-dua enjin daripada input yang sama.
  • Pemetaan lebar bar skrol yang jujur: Firefox hanya menyokong nipis, automatik atau tiada, jadi nilai piksel tepat yang anda pilih dipetakan kepada kata kunci sebenar yang paling hampir dan ditunjukkan di sebelah input anda.
  • Output CSS yang digabungkan dan boleh disalin dengan kedua-dua peraturan elemen pseudo WebKit dan sifat standard Firefox, mengulas dengan jelas.

Faedah Utama

✓ Dua kotak tunjuk cara langsung menjadikan bar skrol sebenar setiap enjin — kotak WebKit sentiasa menunjukkan hasil sebenar dalam Chrome, Safari dan Edge, tiada pemaparan palsu.
✓ Jurang keupayaan Firefox ditunjukkan, tidak tersembunyi: warna tuding, jejari ibu jari dan penggayaan trek bebas semata-mata tidak wujud dalam Firefox, dan alat itu berkata begitu jelas dan bukannya berpura-pura sebaliknya.
✓ Satu blok CSS yang boleh disalin menghantar kedua-dua set peraturan bersama-sama dengan ulasan sandaran, sedia untuk menampal seperti sedia ada.

Kes Penggunaan

  • • Gayakan bar skrol bar sisi papan pemuka agar sepadan dengan palet jenama sambil melihat dengan tepat sejauh mana penggayaan itu mencapai dalam Firefox sebelum menghantarnya.
  • • Dapatkan kata kunci lebar bar skrol Firefox yang jujur ​​untuk ketebalan yang dipilih dan bukannya meneka sama ada nipis atau automatik adalah padanan yang lebih hampir.
  • • Salin satu blok CSS yang membawa kedua-dua peraturan elemen pseudo WebKit dan sifat standard Firefox, masing-masing diulas dengan jelas, terus ke dalam lembaran gaya.