CSS rullefeltgenerator

Rullefelt i Chrome, Safari og Edge-stil med ::-webkit-scrollbar-familien av pseudo-elementer: separate regler for sporet, tommelen og tommelens svevetilstand, pluss en nøyaktig pikselbredde og en tommelkantradius. Firefox ignorerer alt dette fullstendig og leser i stedet to standardegenskaper, rullefeltbredde og rullefelt-farge, som senere kom inn i CSS-rullefeltspesifikasjonen. Dette er ikke to dialekter med samme funksjon - de er to forskjellige funksjonssett med forskjellige tak, og de fleste rullefeltgeneratorer papirer stille over gapet ved kun å vise WebKit-resultatet. Denne gjør ikke det.

Angi bredde, sporfarge, tommelfarge, svevefarge og tommelhjørneradius én gang, og verktøyet bygger to regelsett fra de samme inngangene. WebKit-blokken omfatter ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb og dens :hover-tilstand til venstre demoboks, så det du ser der er nøyaktig hva Chrome, Safari og Edge gjengir – nettleserens egen virkelige motor, ikke et simulert overlegg. Firefox-blokken setter rullefeltbredde og rullefeltfarge på den høyre demoboksen ved å bruke den samme nettleserens egen motor, og det er grunnen til at boksen bare ser annerledes ut når denne siden faktisk er åpen i Firefox; i en WebKit-nettleser viser den sin egen standard rullefelt der, og verktøyet sier det i stedet for å forfalske et Firefox-utseende med lånte piksler.

Breddetilordningen er det tydeligste eksemplet på gapet: Firefoxs rullefeltbredde aksepterer bare nøkkelordene auto, thin eller none – aldri et eksakt pikseltall. Denne generatoren kartlegger den valgte bredden din ærlig (8px og under blir tynn, alt bredere blir automatisk) og viser det resulterende nøkkelordet ved siden av input, i stedet for å finne opp et falskt pikselperfekt Firefox-resultat som ikke eksisterer. Firefox har heller ingen mulighet til å angi en separat svevefarge, en uavhengig tommelkantradius eller en sporfarge som ikke bare er den andre verdien av rullefeltfarge - dette er permanente, reelle begrensninger for plattformen, ikke utelatelser i dette verktøyet.

Kopier den kombinerte CSS-blokken og begge regelsettene reiser sammen, hver under sin egen kommentar, klare til å lime inn i et stilark som det er. Alt gjengis og oppdateres i din egen nettleser mens du drar kontrollene – ingen opplasting, ingen konto, ingen server rundtur, og den fortsetter å fungere offline når siden har lastet inn.