⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

CSS Scrollbar Generator

Styla en rullningslists bredd, spår, tumme och svävningsfärg och se sedan det verkliga WebKit-resultatet bredvid det riktiga Firefox-resultatet – två genuint olika webbläsarsystem, sida vid sida.

10px
8px

Utformad med ::-webkit-scrollbar pseudo-element — den här rutan återges genom din webbläsares egen verkliga motor om det är Chrome, Safari eller Edge.

Utformad med Firefoxs egenskaper för rullningslistbredd och rullningsfältsfärg. Andra webbläsare ignorerar dessa och visar sin egen standardrullningslist här - öppna den här sidan i Firefox för att se det verkliga resultatet.

Firefox har ingen separat svävningsfärg, tumkantsradie eller oberoende spårutformning – bara rullningslistens bredd, mappad här från din valda tjocklek till det verkliga nyckelordet: thin

Bearbetar... 0%

Resultat

Rullningslister i Chrome, Safari och Edge-stil med ::-webkit-scrollbar-familjen av pseudo-element: separata regler för spåret, tummen och tummens svävningstillstånd, plus en pixelexakt bredd och en tumradie. Firefox ignorerar allt detta helt och läser istället två standardegenskaper, scrollbar-width och scrollbar-color, som senare kom in i CSS Scrollbars-specifikationen. Det här är inte två dialekter av samma funktion - de är två olika funktionsuppsättningar med olika tak, och de flesta rullningslistgeneratorer lägger tyst över gapet genom att bara visa WebKit-resultatet. Den här gör det inte.

Ställ in bredd, spårfärg, tumfärg, svävningsfärg och tumhörnradie en gång, så bygger verktyget två regeluppsättningar från samma indata. WebKit-blocket omfattar ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb och dess :hover-tillstånd till den vänstra demorutan, så det du ser där är exakt vad Chrome, Safari och Edge renderar – webbläsarens egen verkliga motor, inte en simulerad överlagring. Firefox-blocket ställer in rullningsfältets bredd och rullningsfältets färg på den högra demorutan med samma webbläsares egen motor, vilket är anledningen till att rutan bara ser annorlunda ut när den här sidan faktiskt är öppen i Firefox; i en WebKit-webbläsare visar den sin egen standardrullningslist där, och verktyget säger det snarare än att fejka ett Firefox-utseende med lånade pixlar.

Breddmappningen är det tydligaste exemplet på gapet: Firefoxs rullningslistbredd accepterar endast nyckelorden auto, thin eller none – aldrig en exakt pixelfigur. Den här generatorn kartlägger din valda bredd ärligt (8px och under blir tunn, allt bredare blir automatiskt) och visar det resulterande nyckelordet bredvid din inmatning, snarare än att uppfinna ett falskt pixel-perfekt Firefox-resultat som inte existerar. Firefox har inte heller något sätt att ställa in en separat svävningsfärg, en oberoende tumkantsradie eller en spårfärg som inte bara är det andra värdet för rullningslist-färg – det här är permanenta, verkliga begränsningar för plattformen, inte utelämnanden i det här verktyget.

Kopiera det kombinerade CSS-blocket och båda regeluppsättningarna reser tillsammans, var och en under sin egen kommentar, redo att klistra in i en stilmall som de är. Allt renderas och uppdateras i din egen webbläsare när du drar kontrollerna - ingen uppladdning, inget konto, ingen server tur och retur, och det fortsätter att fungera offline när sidan har laddats.

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Delade kontroller – bredd, spårfärg, tumfärg, svävningsfärg, tumhörnradie – driver båda motorerna från samma ingångar.
  • Ärlig mappning av rullningslistens bredd: Firefox stöder bara tunn, automatisk eller ingen, så det exakta pixelvärdet du väljer mappas till närmaste verkliga nyckelord och visas bredvid din inmatning.
  • Kombinerad, kopierbar CSS-utdata med både WebKit pseudo-elementregler och Firefox standardegenskaper, tydligt kommenterade.

Viktiga fördelar

✓ Två livedemo-boxar återger varje motors egen riktiga rullningslist – WebKit-rutan visar alltid det verkliga resultatet i Chrome, Safari och Edge, ingen falsk rendering.
✓ Firefox-kapacitetsgapet visas, inte dold: svävningsfärg, tumradie och oberoende spårstyling finns helt enkelt inte i Firefox, och verktyget säger det tydligt istället för att låtsas något annat.
✓ Ett kopierbart CSS-block skickar båda regeluppsättningarna tillsammans med en reservkommentar, redo att klistra in som de är.

Användningsfall

  • • Styla rullningslisten på en instrumentpanels sidofält så att den matchar varumärkespaletten samtidigt som du ser exakt hur långt stilen når i Firefox innan den skickas.
  • • Ta tag i det ärliga sökordet med Firefox rullningslistbredd för en vald tjocklek istället för att gissa om tunn eller automatisk är den bästa matchningen.
  • • Kopiera ett CSS-block som bär både WebKit-pseudoelementreglerna och Firefox-standardegenskaperna, var och en tydligt kommenterad, rakt in i en stilmall.