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

CSS Scrollbar Generator

Stila en rullningslist med bredd, spår, tumme och hover-färg, och se sedan det riktiga WebKit-resultatet bredvid det riktiga Firefox-resultatet – två genuint olika webbläsarsystem, sida vid sida.

🔒 Bearbetas helt i din webbläsare – ingenting du anger här laddas någonsin upp.

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

Chrome, Safari och Edge stilar rullningslister med pseudoelementfamiljen ::-webkit-scrollbar: separata regler för spåret, tummen och tummens hover-tillstånd, plus en pixel-exakt bredd och en border-radius för tummen. Firefox ignorerar allt detta helt och läser istället två standardegenskaper, scrollbar-width och scrollbar-color, som senare infördes 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 slätar tyst över gapet genom att bara visa WebKit-resultatet. Det här verktyget gör inte det.

Ställ in bredd, spårfärg, tumfärg, hover-färg och tummens hörnradie en gång, så bygger verktyget två regeluppsättningar från samma indata. WebKit-blocket kopplar ::-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 riktiga motor, inte en simulerad overlay. Firefox-blocket sätter scrollbar-width och scrollbar-color 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 visas dess egen standardrullningslist där, och verktyget säger det istället för att fejka ett Firefox-utseende med lånade pixlar.

Breddmappningen är det tydligaste exemplet på gapet: Firefox scrollbar-width accepterar endast nyckelorden auto, thin eller none – aldrig en exakt pixelsiffra. Den här generatorn mappar din valda bredd ärligt (8px och under blir thin, allt bredare blir auto) och visar det resulterande nyckelordet bredvid din inmatning, istället för att hitta på ett falskt pixel-perfekt Firefox-resultat som inte finns. Firefox har inte heller något sätt att sätta en separat hover-färg, en oberoende border-radius för tummen eller en spårfärg som inte bara är det andra värdet i scrollbar-color – det här är permanenta, verkliga begränsningar i plattformen, inte försummelser i detta verktyg.

Kopiera det kombinerade CSS-blocket så följer båda regeluppsättningarna med, var och en under sin egen kommentar, redo att klistras in i en stilmall som de är. Allt renderas och uppdateras i din egen webbläsare medan du drar i kontrollerna – ingen uppladdning, inget konto, ingen serverkommunikation, och det fortsätter fungera offline när sidan väl har laddats.

Gillar du det här verktyget? Tror du att den här produkten är användbar? Ser du potential i det och vill stödja det?

🛡️
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, hover-färg, tummens hörnradie – styr båda motorerna från samma indata.
  • Ärlig mappning av rullningslistens bredd: Firefox stöder bara thin, auto eller none, så det exakta pixelvärde du väljer mappas till det närmaste verkliga nyckelordet och visas bredvid din inmatning.
  • Kombinerad, kopieringsbar CSS-utdata med både WebKit-pseudoelementreglerna och Firefox standardegenskaper, tydligt kommenterad.

Viktiga fördelar

✓ Två livedemorutor visar varje motors riktiga rullningslist – WebKit-rutan visar alltid det exakta resultatet i Chrome, Safari och Edge, ingen simulerad rendering.
✓ Firefox begränsningar visas öppet, inte dolda: hover-färg, tumradie och oberoende spårstil finns helt enkelt inte i Firefox, och verktyget säger det rakt ut istället för att låtsas något annat.
✓ Ett kopieringsbart CSS-block levererar båda regeluppsättningarna tillsammans med en fallback-kommentar, redo att klistras in som de är.

Användningsfall

  • • Styla rullningslisten i en dashboards sidopanel så att den matchar varumärkets färgpalett, samtidigt som du ser exakt hur långt den stilen når i Firefox innan du driftsätter den.
  • • Hämta det korrekta nyckelordet för rullningslistens bredd i Firefox för en vald tjocklek, istället för att gissa om thin eller auto ligger närmast.
  • • Kopiera ett CSS-block som innehåller både WebKits pseudoelement-regler och Firefox standardegenskaper, var och en tydligt kommenterad, direkt in i en stilmall.