⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

CSS Scrollbar Generator

Style en scrollbars bredde, track, thumb og hover-farve, og se derefter det reelle WebKit-resultat ved siden af det reelle Firefox-resultat – to grundlæggende forskellige browsersystemer, side om side.

🔒 Behandles helt i din browser - intet, du indtaster her, bliver nogensinde uploadet.

10px
8px

Stylet med ::-webkit-scrollbar pseudo-elementer — denne boks gengives via din browsers egen rigtige motor, hvis det er Chrome, Safari eller Edge.

Stylet med Firefox's scrollbar-width- og scrollbar-color-egenskaber. Andre browsere ignorerer disse og viser deres egen standard scrollbar her — åbn denne side i Firefox for at se det rigtige resultat.

Firefox har ingen separat hover-farve, tommelfingerens hjørneradius eller uafhængig sporestil — kun scrollbar-width, som her er mappet fra din valgte tykkelse til det faktiske nøgleord: thin

Behandler... 0%

Resultat

Chrome, Safari og Edge styler scrollbars med ::-webkit-scrollbar-familien af pseudoelementer: separate regler for track, thumb og thumbens hover-tilstand plus en pixelpræcis bredde og thumb-border-radius. Firefox ignorerer alt dette fuldstændigt og læser i stedet to standardegenskaber, scrollbar-width og scrollbar-color, som senere kom ind i CSS Scrollbars-specifikationen. Det er ikke to dialekter af den samme funktion – det er to forskellige funktionssæt med forskellige begrænsninger, og de fleste scrollbar-generatorer dækker diskret over forskellen ved kun at vise WebKit-resultatet. Det gør denne her ikke.

Indstil bredde, track-farve, thumb-farve, hover-farve og thumb-hjørneradius én gang, så bygger værktøjet to regelsæt ud fra de samme input. WebKit-blokken scoper ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb og dens :hover-tilstand til venstre forhåndsvisningsboks, så det, du ser dér, er præcis, hvad Chrome, Safari og Edge gengiver – browserens egen reelle motor, ikke en simuleret overlejring. Firefox-blokken sætter scrollbar-width og scrollbar-color på højre forhåndsvisningsboks ved brug af den samme browsers egen motor, og derfor ser boksen kun anderledes ud, når denne side faktisk er åben i Firefox; i en WebKit-browser viser den sin egen standard-scrollbar der, og værktøjet fortæller dig det i stedet for at forfalske et Firefox-look med lånte pixels.

Bredde-oversættelsen er det tydeligste eksempel på forskellen: Firefox' scrollbar-width accepterer kun nøgleordene auto, thin eller none – aldrig en nøjagtig pixelværdi. Denne generator oversætter din valgte bredde ærligt (8px og derunder bliver til thin, alt bredere bliver til auto) og viser det resulterende nøgleord ved siden af dit input i stedet for at opfinde et falsk pixelperfekt Firefox-resultat, der ikke findes. Firefox har heller ingen mulighed for at sætte en separat hover-farve, en uafhængig thumb-border-radius eller en track-farve, der ikke blot er den anden værdi i scrollbar-color – det er permanente, reelle begrænsninger i platformen, ikke udeladelser i dette værktøj.

Kopiér den samlede CSS-blok, så følges begge regelsæt ad, hver under sin egen kommentar, klar til at indsætte i et stylesheet, som de er. Alt gengives og opdateres i din egen browser, mens du trækker i kontrollerne – ingen upload, ingen konto, ingen tur retur til en server, og det bliver ved med at fungere offline, når siden først er indlæst.

Kan du lide dette værktøj? Synes du, produktet er nyttigt? Ser du potentiale i det og vil støtte det?

🛡️
Køres i browseren

Dine filer og input forlader aldrig denne enhed. Al behandling foregår offline. 100 % sikkert.

Accepterede formater og regler

  • Fælles kontroller – bredde, track-farve, thumb-farve, hover-farve, thumb-hjørneradius – styrer begge browsere fra de samme input.
  • Ærlig scrollbar-width-oversættelse: Firefox understøtter kun thin, auto eller none, så den nøjagtige pixelværdi, du vælger, oversættes til det nærmeste reelle nøgleord og vises ved siden af dit input.
  • Samlet, kopierbar CSS-output med både WebKit-pseudoelementreglerne og Firefox-standardegenskaberne, tydeligt kommenteret.

Vigtigste fordele

✓ To live-forhåndsvisningsbokse gengiver hver deres browsers egen scrollbar – WebKit-boksen viser altid det reelle resultat i Chrome, Safari og Edge, uden simulering.
✓ Firefox' manglende funktioner vises åbent frem: hover-farve, thumb-radius og uafhængig track-styling findes simpelthen ikke i Firefox, og værktøjet siger det rent ud i stedet for at lade som andet.
✓ Én kopierbar CSS-blok samler begge regelsæt med en fallback-kommentar, klar til at indsætte, som den er.

Anvendelsestilfælde

  • • Stil et dashboard-sidepanels scrollbar, så den matcher brandets farvepalet, mens du ser præcis, hvor langt den styling rækker i Firefox, inden du sender den i produktion.
  • • Få det ærlige Firefox-nøgleord for scrollbar-bredde til en valgt tykkelse i stedet for at gætte på, om thin eller auto er det tætteste match.
  • • Kopiér én CSS-blok, der indeholder både WebKit-pseudo-element-reglerne og Firefox-standardegenskaberne, hver især tydeligt kommenteret, direkte ind i et stylesheet.