Das W3C hat eine neue Spezifikation aus der Taufe gehoben. Auch wenn es sich noch um einen sehr frühen Status handelt, will ich schon mal einen Blick darauf werfen: Scrollbars Module Level 1

Wie der Name schon sagt, geht es darum, die Rollbalken des Browsers an den Style der eigenen Seite anzupassen. Dazu werden zwei neue CSS-Eigenschaften erfunden. Eine definiert Farben, die Andere bestimmt die Breite.

Ein Wort vorweg: wie bei allen Eingriffen in die UI(User Interface) des Browsers muss man sich bewusst sein, was man tut. Jede Änderung bricht mit der Erwartung des Benutzers und kann sich auf die Zugänglichkeit auswirken. Bezüglich letzterem ist besonders zu berücksichtigen, den Kontrast in den Farben hoch genug zu wählen.

Kompatibilität

Es handelt sich noch um einen sehr frühen Stand, daher werden beide Eigenschaften bislang nur von einem Browser unterstützt: Firefox.

Farbe

Mit der Eigenschaft scrollbar-color lässt sich sowohl die Farbe des „Schiebers“ als auch die Hintergrundfarbe einstellen. Dazu verwendet man einfach zwei Farbangaben mit einem Leerzeichen getrennt:

<style>
  html {
    scrollbar-color: blue lightblue;
  }
</style>

Die Scrollbar des Fensters hängt dabei am HTML-Element. Für innere Elemente wie z.B. Textarea-Elemente funktioniert die Eigenschaft natürlich auch.

Leider gibt es keine einzelnen Eigenschaften für die beiden Farben. Also muss man immer beides setzen. Das ist deswegen problematisch, weil man so nicht eines der beiden (z.B. den Hintergrund) auf dem Standard des Systems belassen kann.

Pseudo-Klassen

Wenn man die Farben anpassen will, während gescrollt wird, kann man dies über Pseudoklassen (hover, focus, active) erreichen. Allerdings ist dabei zu beachten, dass Firefox immer noch eine Abdunklung oder Aufhellung der Farbe des Schiebers vornimmt.

Themes

Man kann anstelle der beiden Farbwerte auch eines der beiden Themes light und dark angeben. Ich denke mal, das ist für Systeme, die eine Art Dark-Mode der UI unterstützen. Bei mir hatte aber keiner der Werte eine Auswirkung.

Breite

Mittels scrollbar-width lässt sich einer von drei Werten auswählen, der die Breite der Scrollbar bestimmt. Es besteht die Auswahl zwischen auto für das „normale“ Design des Browsers, thin für eine schmale Darstellung und none zum Ausblenden der Scrollbars.

Mit none kann der Bereich trotzdem noch gescrollt werden, zum Beispiel über das Scrollrad einer Maus. Das Ganze macht vielleicht in Kombination mit den Pseudoklasse Hover und Fokus Sinn. Damit kann man den Scrollbalken ausblenden, bis er gebraucht wird. Allerdings ändert sich dadurch auch die Breite der Box, was zu einem anderen Textumbruch führen kann.

Den Wert thin hingegen, kann ich mir ganz gut vorstellen, bei Scrollbars innerhalb einer Seite. Unter Windows 10 wirken diese so nicht ganz so brachial als Fremdkörper.

Die Eigenschaft wird übrigens nicht vererbt. Man kann sie also nicht an einem Element setzen und erwarten, dass sie sich auch bei allen Kindern auswirkt. Stattdessen muss man sie überall deklarieren, wo man sie auch wirklich braucht (oder eben mit dem *-Selektor überall).

<style>
  html {
    scrollbar-width: thin;
  }
</style>

Fazit

Nicht gerade das wichtigste Feature auf der Welt, aber ganz nett. Insbesondere die schmaleren Scrollbalken können bei Textareas recht schick sein. Ich hoffe aber, dass diese Einflussnahme in die UI durch die Nutzer leicht deaktivierbar sein wird. Ein paar Gruppen könnten sonst Probleme haben die schmalen Scrollbars zu bedienen oder die gefärbten überhaupt richtig wahrzunehmen.

Da ein Mitarbeiter von Microsoft an der Spezifikation arbeitet, besteht die Hoffnung, dass Chromium im Rahmen des neuen Edge Browsers auch bald unterstützt wird?