CSS-schuifbalkgenerator

Schuifbalken in Chrome-, Safari- en Edge-stijl met de ::-webkit-scrollbar-familie van pseudo-elementen: afzonderlijke regels voor de track, de duim en de zweefstatus van de duim, plus een pixel-exacte breedte en een duimrandradius. Firefox negeert dat allemaal volledig en leest in plaats daarvan twee standaardeigenschappen, scrollbar-width en scrollbar-color, die later in de CSS-scrollbars-specificatie terechtkwamen. Dit zijn niet twee dialecten met dezelfde functie; het zijn twee verschillende functiesets met verschillende plafonds, en de meeste schuifbalkgeneratoren overbruggen stilletjes het gat door alleen het WebKit-resultaat weer te geven. Deze niet.

Stel de breedte, trackkleur, duimkleur, hoverkleur en duimhoekradius één keer in, en de tool bouwt twee regelsets op op basis van dezelfde invoer. Het WebKit-blok omvat ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb en de :hover-status naar het linker demovak, dus wat je daar ziet is precies wat Chrome, Safari en Edge weergeven: de echte browser-engine, geen gesimuleerde overlay. Het Firefox-blok stelt de schuifbalkbreedte en de schuifbalkkleur in het rechter demovenster in met behulp van de eigen engine van diezelfde browser. Daarom ziet het vak er alleen anders uit als deze pagina daadwerkelijk geopend is in Firefox; in een WebKit-browser wordt daar zijn eigen standaardschuifbalk weergegeven, en de tool zegt dat in plaats van een Firefox-look na te bootsen met geleende pixels.

De breedtetoewijzing is het duidelijkste voorbeeld van de kloof: de schuifbalkbreedte van Firefox accepteert alleen de trefwoorden auto, thin of none – nooit een exact aantal pixels. Deze generator brengt de door u gekozen breedte eerlijk in kaart (8px en minder wordt dun, alles wat breder wordt automatisch) en geeft het resulterende trefwoord weer naast uw invoer, in plaats van een nep-pixel-perfect Firefox-resultaat uit te vinden dat niet bestaat. Firefox heeft ook geen manier om een ​​aparte hoverkleur, een onafhankelijke duimrandradius of een trackkleur in te stellen die niet simpelweg de tweede waarde van de schuifbalkkleur is. Dit zijn permanente, echte beperkingen van het platform, geen weglatingen in deze tool.

Kopieer het gecombineerde CSS-blok en beide regelsets reizen samen, elk onder hun eigen commentaar, klaar om in een stylesheet te plakken zoals het is. Alles wordt weergegeven en bijgewerkt in uw eigen browser terwijl u de bedieningselementen sleept: geen upload, geen account, geen serverrondreis, en het blijft offline werken zodra de pagina is geladen.