CSS-Scrollbar-Generator

Bildlaufleisten im Chrome-, Safari- und Edge-Stil mit der Pseudoelementfamilie ::-webkit-scrollbar: separate Regeln für die Spur, den Daumen und den Hover-Status des Daumens sowie eine pixelgenaue Breite und einen Daumenrandradius. Firefox ignoriert all das vollständig und liest stattdessen zwei Standardeigenschaften, scrollbar-width und scrollbar-color, die später in die CSS-Scrollbars-Spezifikation aufgenommen wurden. Hierbei handelt es sich nicht um zwei Dialekte derselben Funktion – es handelt sich um zwei unterschiedliche Funktionssätze mit unterschiedlichen Obergrenzen, und die meisten Scrollbar-Generatoren überdecken die Lücke stillschweigend, indem sie nur das WebKit-Ergebnis anzeigen. Dies hier nicht.

Legen Sie die Breite, die Spurfarbe, die Daumenfarbe, die Hover-Farbe und den Daumeneckenradius einmal fest, und das Tool erstellt zwei Regelsätze aus denselben Eingaben. Der WebKit-Block erstreckt sich über ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb und seinen :hover-Status auf die linke Demobox, sodass Sie dort genau das sehen, was Chrome, Safari und Edge rendern – die eigene echte Engine des Browsers, kein simuliertes Overlay. Der Firefox-Block legt die Bildlaufleistenbreite und die Bildlaufleistenfarbe in der rechten Demobox mithilfe der eigenen Engine desselben Browsers fest, weshalb die Box nur dann anders aussieht, wenn diese Seite tatsächlich in Firefox geöffnet ist; In einem WebKit-Browser wird dort seine eigene Standard-Bildlaufleiste angezeigt, und das Tool sagt dies, anstatt mit geliehenen Pixeln einen Firefox-Look vorzutäuschen.

Die Breitenzuordnung ist das deutlichste Beispiel für die Lücke: Die scrollbar-width von Firefox akzeptiert nur die Schlüsselwörter „auto“, „thin“ oder „none“ – niemals eine exakte Pixelzahl. Dieser Generator ordnet Ihre gewählte Breite ehrlich zu (8 Pixel und weniger werden dünn, alles, was breiter ist, wird automatisch) und zeigt das resultierende Schlüsselwort neben Ihrer Eingabe an, anstatt ein gefälschtes, pixelgenaues Firefox-Ergebnis zu erfinden, das nicht existiert. Firefox bietet auch keine Möglichkeit, eine separate Hover-Farbe, einen unabhängigen Daumenrandradius oder eine Spurfarbe festzulegen, die nicht einfach der zweite Wert von scrollbar-color ist – dies sind dauerhafte, echte Einschränkungen der Plattform und keine Auslassungen in diesem Tool.

Kopieren Sie den kombinierten CSS-Block, und beide Regelsätze werden zusammen übertragen, jeweils unter einem eigenen Kommentar, und können so in ein Stylesheet eingefügt werden. Alles wird in Ihrem eigenen Browser gerendert und aktualisiert, während Sie die Steuerelemente ziehen – kein Upload, kein Konto, kein Server-Roundtrip und es funktioniert offline weiter, sobald die Seite geladen wurde.