⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

CSS-rullefeltgenerator

Angi bredde, spor-, tommel- og svevefarge for et rullefelt, og se det faktiske WebKit-resultatet ved siden av det faktiske Firefox-resultatet – to genuint forskjellige nettlesersystemer, side om side.

🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.

10px
8px

Stilet med ::-webkit-scrollbar-pseudoelementer — denne boksen gjengis av nettleserens egen virkelige motor dersom den er Chrome, Safari eller Edge.

Stilet med Firefox sine scrollbar-width- og scrollbar-color-egenskaper. Andre nettlesere ignorerer disse og viser sin egen standard rullefelt her — åpne denne siden i Firefox for å se det virkelige resultatet.

Firefox har ingen egen hover-farge, border-radius for tommelen eller uavhengig spor-styling — kun scrollbar-width, som her er avledet fra den valgte tykkelsen til det faktiske nøkkelordet: thin

Behandler … 0%

Resultat

Chrome, Safari og Edge stiler rullefelt med pseudoelementfamilien ::-webkit-scrollbar: separate regler for spor, tommel og tommelens svevetilstand, pluss en pikseleksakt bredde og en tommel-border-radius. Firefox ignorer alt dette fullstendig og leser i stedet to standardegenskaper, scrollbar-width og scrollbar-color, som senere ble en del av CSS Scrollbars-spesifikasjonen. Dette er ikke to dialekter av samme funksjon – det er to forskjellige funksjonssett med ulike begrensninger, og de fleste rullefeltgeneratorer dekker diskret over gapet ved bare å vise WebKit-resultatet. Det gjør ikke denne.

Angi bredde, sporfarge, tommelfarge, svevefarge og tommelhjørneradius én gang, så bygger verktøyet to regelsett fra de samme inndataene. WebKit-blokken scoper ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb og :hover-tilstanden til den venstre demo-boksen, så det du ser der er nøyaktig det Chrome, Safari og Edge gjengir – nettleserens egen ekte motor, ikke et simulert overlegg. Firefox-blokken setter scrollbar-width og scrollbar-color på den høyre demo-boksen ved hjelp av den samme nettleserens egen motor, noe som er grunnen til at boksen bare ser annerledes ut når denne siden faktisk er åpen i Firefox; i en WebKit-nettleser viser den sitt eget standard rullefelt der, og verktøyet sier ifra om det i stedet for å forfalske et Firefox-utseende med lånte piksler.

Breddetilordningen er det tydeligste eksempelet på gapet: Firefox' scrollbar-width godtar bare nøkkelordene auto, thin eller none – aldri et eksakt pikseltall. Denne generatoren tilordner den valgte bredden din ærlig (8 px og under blir thin, alt bredere blir auto) og viser det resulterende nøkkelordet ved siden av inndatafeltet, i stedet for å dikte opp et falskt pikselperfekt Firefox-resultat som ikke finnes. Firefox har heller ingen måte å angi en egen svevefarge, en uavhengig tommel-border-radius eller en sporfarge som ikke bare er den andre verdien av scrollbar-color – dette er permanente, reelle begrensninger i plattformen, ikke utelatelser i dette verktøyet.

Kopier den kombinerte CSS-blokken, så følger begge regelsettene med, hver under sin egen kommentar, klare til å limes inn i et stilark som de er. Alt gjengis og oppdateres i din egen nettleser mens du drar i kontrollene – ingen opplasting, ingen konto, ingen rundtur til serveren, og det fortsetter å fungere offline etter at siden er lastet inn.

Liker du dette verktøyet? Synes du produktet er nyttig? Ser du potensial og ønsker å støtte det?

🛡️
Behandlet i nettleseren

Dine filer og inndata forlater aldri denne enheten. Behandlingen skjer fullstendig frakoblet. 100 % sikkert.

Godkjente formater og regler

  • Felles kontroller – bredde, sporfarge, tommelfarge, svevefarge, tommelhjørneradius – styrer begge motorene fra de samme inndataene.
  • Ærlig breddetilordning for rullefelt: Firefox støtter bare thin, auto eller none, så den eksakte pikselverdien du velger, tilordnes det nærmeste reelle nøkkelordet og vises ved siden av inndatafeltet.
  • Kombinert, kopierbar CSS-kode med både WebKit-pseudoelementreglene og Firefox-standardegenskapene, tydelig kommentert.

Viktigste fordeler

✓ To live demo-bokser gjengir hver nettlesermotors ekte rullefelt – WebKit-boksen viser alltid det faktiske resultatet i Chrome, Safari og Edge, uten simulering.
✓ Firefox' begrensninger vises tydelig: svevefarge, tommelradius og uavhengig sporfarging finnes rett og slett ikke i Firefox, og verktøyet sier det rett ut i stedet for å late som noe annet.
✓ Én kopierbar CSS-blokk leverer begge regelsettene sammen med en fallback-kommentar, klar til å limes inn som de er.

Bruksområder

  • • Style rullefeltet i dashbordets sidepanel slik at det matcher merkevarens fargepalett, og se samtidig akkurat hvor langt den stilen rekker i Firefox før du går i produksjon.
  • • Få den ærlige Firefox-nøkkelverdien for rullefeltbredde for en ønsket tykkelse, i stedet for å gjette om «thin» eller «auto» ligger nærmest.
  • • Kopier én CSS-blokk som inneholder både WebKit-pseudoelement-reglene og Firefox-standardegenskapene, med tydelige kommentarer, rett inn i stilarket.