Erstellen einer benutzerdefinierten Bereichseingabe, die in allen Browsern konsistent aussieht

Als einer der Betreuer einer UI-Komponentenbibliothek habe ich unzählige Eingabeelemente implementiert und gestaltet. Eines Tages wurde mir die Aufgabe übertragen, der Bibliothek eine Bereichseingabe hinzuzufügen, und ich dachte mir, dass es ein ähnlicher Prozess wie die anderen Eingaben sein würde, die ich in der Vergangenheit implementiert hatte. Diese Annahme war richtig, bis ich anfing, die Bereichseingabe in mehreren Browsern zu testen und schnell feststellte, dass ich viel mehr Arbeit vor mir hatte.

Nach vielen Recherchen war ich endlich in der Lage, genügend Blog-Posts, Artikel und ausführliche Tutorials zu finden, die mir dabei helfen, die Bereichseingabe so zu gestalten, dass sie konsistent gerendert wird. Anstatt nach mehreren Ressourcen suchen zu müssen, besteht der Zweck dieses Blogbeitrags darin, eine zentrale Anlaufstelle bereitzustellen, um zu lernen, wie man eine Bereichseingabe richtig gestaltet, die in allen Browsern konsistent aussieht. Es ist der Artikel, den ich mir gewünscht hätte, als ich das selbst tun musste, und ich hoffe, dass er dazu beiträgt, diesen Prozess für Sie schneller und reibungsloser zu gestalten.

Anatomie einer Bereichseingabe

Die Bereichseingabe besteht aus zwei Hauptteilen:

1. Spur
   Dies ist der Teil des Schiebereglers, an dem der Daumen entlang läuft . Oder anders ausgedrückt, es ist das lange Element, das die Wertebereiche darstellt, die ausgewählt werden können.
2. Daumen
   Dies ist ein Element auf der Spur, das der Benutzer verschieben kann, um verschiedene Bereichswerte auszuwählen.

Wenn es eine mathematische Gleichung wäre:

Bereichseingabe = Spur + Daumen

Die Bereichseingabe wird manchmal als „Schieberegler“ bezeichnet, und im Rest dieses Artikels werde ich diese Begriffe synonym verwenden.

Browser-Inkonsistenzen

Um zu demonstrieren, warum wir überhaupt ein Tutorial zum Stylen von Bereichseingaben benötigen, werfen wir einen Blick auf einige Screenshots der Standard-HTML-Bereichseingabe und wie sie in den vier wichtigsten Browsern (Chrome, Firefox, Safari und Rand). Oder, wenn Sie es vorziehen, können Sie diese CodeSandbox-Demo in jedem der jeweiligen Browser anzeigen, um die Browser-Inkonsistenzen in ihrer ganzen Pracht zu sehen.

Hinweis: Diese Screenshots wurden im September 2021 aufgenommen und können sich ändern, wenn die jeweiligen Browser aktualisiert werden.

Beginnen wir mit einem Blick auf Chrome, das meiner Meinung nach standardmäßig die benutzerfreundlichste Version der Eingabe darstellt.

Firefox ist als nächstes dran und sieht anders aus als die von Chrome gerenderte Eingabe. In Firefox ist die Höhe der Spur etwas kürzer. Andererseits sind Höhe und Breite des Daumens größer und haben nicht die gleiche blaue Hintergrundfarbe wie die Chrome-Version.

Der Safari-Schieberegler kommt der Firefox-Version am nächsten, ist aber noch einmal anders. Diesmal scheint die Spur einen schattigen Effekt zu haben, und die Höhe des Daumens und die Breite sind kleiner als die Wiedergaben von Chrome und Firefox. Wenn Sie genau hinsehen, können Sie auch sehen, dass der Daumen nicht direkt auf der Spur zentriert ist, was ihm ein unpoliertes Aussehen und Gefühl verleiht.

Last but not least ist Edge, das jetzt, da Microsoft Edge auf Chromium aufgebaut ist, viel besser auf die anderen drei Browser abgestimmt ist als sein Vorgänger vor Chromium. Wir können jedoch sehen, dass es immer noch anders dargestellt wird als die anderen drei Browser. Edges Wiedergabe der Bereichseingabe sieht der Chrome-Version sehr ähnlich, außer dass der Daumen und die linke Seite der Spur vor dem Daumen eine dunklere graue Hintergrundfarbe haben.

Nachdem wir nun gesehen haben, wie schrecklich inkonsistent jeder Browser die Bereichseingabe darstellt, werden wir uns ansehen, wie wir CSS verwenden können, um sie zu vereinheitlichen.

Bereich zurücksetzen (Basisstile)

Da die Browser-Inkonsistenzen so unterschiedlich sind, müssen wir von gleichen Wettbewerbsbedingungen ausgehen. Sobald die Standardstile, die jeder Browser anwendet, entfernt wurden, können wir damit beginnen, eine einheitlicher aussehende Eingabe zu erstellen. Wir verwenden den Elementattribut-Selektor input[type="range"] und die hier angewendeten Stile wirken wie ein CSS-Reset für die Eingabe.

Um die Grundlinienstile anzuwenden, benötigen wir vier Eigenschaften:

1. -webkit-appearance: none;
   Diese Eigenschaft ist ein Herstellerpräfix, das für alle gängigen Browser gilt. Indem Sie ihm den Wert none geben, weist dies jeden jeweiligen Browser an, alle Standardstile zu löschen. Dies ermöglicht es uns, von vorne zu beginnen und das Aussehen der Eingabe von diesem Punkt aus aufzubauen.
2. background: transparent;
   Dadurch wird der Standardhintergrund gelöscht, der auf die Eingabe angewendet wird.
3. cursor: pointer;
4. width
   Legt die Gesamtbreite der Eingabe fest.

 input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; width: 15rem; }

Styling der Strecke

Beim Stylen des Tracks (und des Daumens) müssen wir auf die verschiedenen browserspezifischen Anbieterpräfixe abzielen, um die richtigen Styles im relevanten Element anzuwenden. In Zukunft werden alle Pseudo-Elemente mit dem Präfix -webkit auf die Browser Chrome, Safari, Opera und Edge (post-Chromium) angewendet. Alles mit dem Präfix -moz bezieht sich auf Firefox.

Unten sind die Pseudo-Elemente, die wir verwenden werden, um den Track zu zielen:

• ::-webkit-slider-runnable-track
  Zielt auf die Spur in Chrome, Safari und Edge Chromium ab.
• ::-moz-range-track
  Zielt auf den Track in Firefox ab.

 /***** Track Styles *****/ /***** Chrome, Safari, Opera, and Edge Chromium *****/ input[type="range"]::-webkit-slider-runnable-track { background: #053a5f; height: 0.5rem; } /******** Firefox ********/ input[type="range"]::-moz-range-track { background: #053a5f; height: 0.5rem; }

Die einzigen erforderlichen Eigenschaften für die Spur sind die height und der background . Es ist jedoch üblich, dass ein border-radius angewendet wird, um die Kanten abzurunden.

Den Daumen stylen

Die Gestaltung des Daumens (der mittlere Knopf, den der Benutzer bewegt) hat mehr Nuancen, die berücksichtigt werden müssen, da es mehr Inkonsistenzen zwischen den Browsern in diesem Teil der Bereichseingabe gibt.

Unten sind die Pseudo-Elemente, die wir verwenden werden, um auf den Daumen zu zielen:

• ::-webkit-slider-thumb
  Zielt auf den Daumen in Chrome, Safari und Edge Chromium ab.
• ::-moz-range-thumb
  Zielt auf den Daumen in Firefox ab.

Da Firefox und die Webkit-Browser unterschiedliche Gestaltungsprobleme haben, werde ich jedes Problem einzeln ansprechen und zeigen, wie man mit jeder der skurrilen Standardeinstellungen umgeht, die auf den Daumen angewendet werden.

Chrome, Safari, Edge Chromium (Webkit)

Der erste Stil, den wir auf das ::-webkit-slider-thumb anwenden müssen, ist -webkit-appearance: none; Anbieterpräfix. Wir haben diese Eigenschaft im Abschnitt „Basisstile“ verwendet, um die allgemeinen Standardstile zu überschreiben, die vom Browser angewendet werden, und sie dient einem ähnlichen Zweck auf dem Daumen.

Sobald die Standardstile entfernt wurden, können wir unsere eigenen benutzerdefinierten Stile anwenden. Angenommen, wir wenden eine height , width und background-color auf den Daumen an, hier ist ein Beispiel dafür, was wir bisher hätten:

Standardmäßig rendern die WebKit-Browser den Daumen so, dass er nicht auf der Spur zentriert ist.

Um den Daumen richtig auf der Spur zu zentrieren, können wir die folgende Formel verwenden und sie auf die Eigenschaft margin-top anwenden:

margin-top = (Spurhöhe in Pixel / 2) - (Daumenhöhe in Pixel / 2)

Wenn wir die Stile, die wir in den vorherigen Abschnitten angewendet haben, verwenden und Rems in Pixel umwandeln, hätten wir eine rems von 8 Pixel und eine Daumenhöhe von 32 Pixel. Dies würde Folgendes bedeuten:

Rand oben = (8/2) - (32/2) = 4 - 16 = -12px

Auf dieser Grundlage würden unsere endgültigen Stile für die Webkit-Browser wie der folgende Codeblock aussehen:

 /***** Thumb Styles *****/ /***** Chrome, Safari, Opera, and Edge Chromium *****/ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; margin-top: -12px; /* Centers thumb on the track */ background-color: #5cd5eb; height: 2rem; width: 1rem; }

Feuerfuchs

Wenn Sie in Firefox Stile auf den Daumen anwenden, müssen Sie das ::-moz-range-thumb . Glücklicherweise leidet Firefox nicht unter dem gleichen Zentrierungsproblem wie die Webkit-Browser. Es gibt jedoch ein Problem um den standardmäßigen Randradius und den grauen Rand, den er auf den Daumen anwendet.

Um den grauen Standardrand zu beheben, können wir den border: none; Eigentum. Um den angewendeten Standard-Randradius zu entfernen, können wir die Eigenschaft border-radius: 0 hinzufügen, und jetzt sieht der Daumen in allen Browsern einheitlich aus.

Auf dieser Grundlage würden unsere endgültigen Stile für den Firefox-Browser wie folgt aussehen:

 /***** Thumb Styles *****/ /***** Firefox *****/ input[type="range"]::-moz-range-thumb { border: none; /*Removes extra border that FF applies*/ border-radius: 0; /*Removes default border-radius that FF applies*/ background-color: #5cd5eb; height: 2rem; width: 1rem; }

Hinweis: Die Webkit-Browser wenden diesen Radius nicht automatisch auf den Rand an. Wenn Sie also feststellen, dass Sie eine Art Randradius auf den Daumen anwenden möchten, anstatt ihn wie oben aufzuheben, müssen Sie dies tun um die gewünschten border-radius Dimensionen auf die -webkit-slider-thumb und ::-moz-range-thumb .

Fokusstile

Da es sich bei der Bereichseingabe um ein interaktives Element handelt, ist es zwingend erforderlich, Fokusstile hinzuzufügen, um die Best Practices und Standards für Barrierefreiheit einzuhalten. Wenn Fokusstile angewendet werden, bietet dies eine visuelle Anzeige für Benutzer und ist besonders wichtig für Benutzer, die eine Tastatur zum Navigieren auf einer Seite verwenden.

Gemäß der WAI-ARIA: Slider-Dokumentation wird Folgendes empfohlen:

Der Fokus wird auf den Schieberegler gelegt (das visuelle Objekt, das der Mausbenutzer bewegen würde, auch bekannt als Daumen).

Als erstes möchten wir die Standard-Fokusstile entfernen, damit wir sie mit benutzerdefinierten Stilen überschreiben können. Um auf die Fokusstile von thumbs abzuzielen, können wir die ::-webkit-slider-thumb und ::-moz-range-thumb nutzen, die wir im vorherigen Abschnitt verwendet haben, und sie mit der Pseudoklasse :focus kombinieren . Wir können dann die CSS-Eigenschaften outline und outline-offset verwenden, um es so zu gestalten, wie wir es wollen.

 /***** Focus Styles *****/ /* Removes default focus */ input[type="range"]:focus { outline: none; } /***** Chrome, Safari, Opera, and Edge Chromium *****/ input[type="range"]:focus::-webkit-slider-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; } /******** Firefox ********/ input[type="range"]:focus::-moz-range-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; }

Hinweis : Wenn ein border-radius auf den Daumen angewendet wird, rendert Firefox einen Umriss in Form des Daumens , während die anderen Browser einen blockartigen Umriss anzeigen. Leider gibt es dafür keine einfache CSS-Korrektur und es ist die einzige Inkonsistenz, die vorhanden sein wird. Der Hauptzweck des Hinzufügens dieser Stile liegt jedoch in der Barrierefreiheit, und das Hauptziel, einen visuellen Indikator bereitzustellen, wenn das Element fokussiert ist, wird dennoch erreicht.

Alles zusammenfügen

Nachdem wir nun alle Stile behandelt haben, die zur Vereinheitlichung der Bereichseingabe erforderlich sind, sieht das endgültige CSS-Stylesheet so aus:

 /********** Range Input Styles **********/ /*Range Reset*/ input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; width: 15rem; } /* Removes default focus */ input[type="range"]:focus { outline: none; } /***** Chrome, Safari, Opera and Edge Chromium styles *****/ /* slider track */ input[type="range"]::-webkit-slider-runnable-track { background-color: #053a5f; border-radius: 0.5rem; height: 0.5rem; } /* slider thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; margin-top: -12px; /* Centers thumb on the track */ /*custom styles*/ background-color: #5cd5eb; height: 2rem; width: 1rem; } input[type="range"]:focus::-webkit-slider-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; } /******** Firefox styles ********/ /* slider track */ input[type="range"]::-moz-range-track { background-color: #053a5f; border-radius: 0.5rem; height: 0.5rem; } /* slider thumb */ input[type="range"]::-moz-range-thumb { border: none; /*Removes extra border that FF applies*/ border-radius: 0; /*Removes default border-radius that FF applies*/ /*custom styles*/ background-color: #5cd5eb; height: 2rem; width: 1rem; } input[type="range"]:focus::-moz-range-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; }

Fazit

Zusätzlich zu den im gesamten Artikel beschriebenen Methoden können Sie auch den von mir erstellten Bereichseingabe-CSS-Generator mit dem Namen range-input.css nutzen . Der springende Punkt bei diesem Projekt war es, ein Tool zu entwickeln, das diesen Prozess für Entwickler einfacher macht. Der CSS-Generator ermöglicht Ihnen das schnelle Gestalten allgemeiner CSS-Eigenschaften und bietet einen Demo-Schieberegler, der eine Echtzeitvorschau der Stile anzeigt, die Sie anwenden möchten.

Hoffentlich wird die Eingabe des Stylingbereichs in Zukunft einfacher. Bis dieser Tag kommt, hilft Ihnen das Wissen, auf welche Pseudo-Elemente und Anbieter-Präfixe Sie abzielen, auf dem besten Weg, Slider so zu gestalten, dass sie Ihren Anforderungen entsprechen.

Weitere Ressourcen zum Smashing Magazine

• CSS-Generatoren
• Vereinfachung von Formularstilen mit accent-color
• Intelligente CSS-Lösungen für allgemeine UI-Herausforderungen
• Ein tiefer Einblick in object-fit und background-size in CSS