Bevor wir uns mit einigen weiteren Themen im Adventskalenders beschäftigen, müssen wir etwas über eine Browserfunktion erfahren, die wir dazu brauchen werden. Deshalb habe ich die Reihenfolge meiner geplanten Themen zum Debugging ein wenig umgestellt, um dieses Thema früher zu behandeln.

In einigen meiner nächsten Blog-Beiträge werde ich über ein paar CSS-Funktionen sprechen, die bestimmten Personen zugutekommen können, die eure Website besuchen. Vor fast 5 Jahren habe ich in einem Blog-Beitrag beschrieben, wieso man „Bewegungen auf einer Webseite für eine bessere Barrierefreiheit reduzieren“ sollte. In diesem Blogbeitrag habe ich erklärt, wie ihr die Einstellungen in Windows 10 oder Android 9 ändern könnt, um die Präferenz für reduzierte Bewegungen zu simulieren. Aber vielleicht verwendet ihr ein anderes Betriebssystem (wie ich z.B. Manjaro Linux für die Arbeit), bei dem es keine Schnelleinstellung gibt. Oder aber, ihr möchtet die Einstellung schneller umschalten können. Glücklicherweise gibt es bei einigen Browsern einen solchen Umschalter für euch.

Einstellungen in Chrome vornehmen

In Chrome (und anderen auf dem Chromium-Projekt basierenden Browsern wie Edge) finden ihr die meisten Einstellungen, indem ihr auf die drei vertikalen Punkte oben rechts klicken, dann „Weitere Tools“ auswählt und dort die „Rendering“ Einstellungen anklickt:

Dadurch öffnet sich ein weiteres Panel in den Entwicklertools. Wenn ihr ein wenig nach unten scrollt, finden ihr dort diese Einstellungen, mit denen ihr verschiedene Vorlieben simulieren könnt. In diesem Beispiel setze ich prefers-reduced-motion auf reduce:

Der einzige Nachteil dieser Einstellung: sobald ihr die Entwicklertools schließt, wird die Einstellung auf ihren Standardwert zurückgesetzt. Wenn ihr also eine Website testen möchten, auf der mehr vertikaler Platz zur Verfügung stehen soll (da die beiden Panels viel Höhe beanspruchen), würde ich vorschlagen, die Entwicklertools in einem separaten Fenster anzuzeigen.

Wir werden diese Einstellungen für die kommenden Themen benötigen. Aber es gibt noch mehr Möglichkeiten, Einstellungen zu simulieren, die das Verhalten und das Aussehen eurer Website verändern. Wenn ihr beispielsweise eure Website schnell mal mit einem dunklen Farbschema anzeigen lassen möchtet, dann müssen ihr nicht euer Betriebssystem auf ein dunkles Farbschema umstellen oder die Rendering-Einstellungen öffnen. Stattdessen finden ihr im Abschnitt „Stile“ eine nette Umschaltfunktion. Klickt einfach auf das „Pinsel“-Symbol und wechselt hier zu dem Farbschema, das ihr testen möchtet.

Leider wird das Farbschema, genau wie beim Rendering-Panel, wieder auf den Standardwert zurückgesetzt, sobald ihr die Entwicklertools schließen.

Einstellungen in Edge vornehmen

Obwohl Edge auf Chromium basiert und viele Entwicklertools genau gleich aussehen, finden ihr in Edge nicht das Panel „Weitere Tools > Rendering“. Stattdessen öffnen ihr hierzu erst die Entwicklertools. Auf Panels wie „Elements“ seht ihr im unteren Teil die „Konsole“ und „Probleme“. Hier klickt ihr dann auf das „+“-Symbol und wählt die „Rendering Schnellansicht“. Nach dem Öffnen sieht sie den Einstellungen in Chrome sehr ähnlich.

Auch in Edge können ihr das Farbschema mit einem „Pinsel“-Symbol schnell umschalten, genau wie in Chrome.

Einstellungen in Firefox vornehmen

In Firefox sind die Einstellungen nicht leicht zugänglich. Außerdem befinden sie sich an verschiedenen Stellen. Wenn ihr prefers-reduced-motion einstellen möchtet, müsst ihr zur URL about:config navigieren, dann nach ui.prefersReducedMotion suchen, einen booleschen Wert hinzufügen und ihn auf false setzen. Für prefers-reduced-transparency müsste ihr hingegen nach layout.css.prefers-reduced-transparency.enabled suchen und diesen Wert auf true setzen. Das ist alles sehr inkonsistent und ärgerlicherweise nicht an einem Ort.

Wenn wir das Farbschema umschalten wollen, haben wir mehr Glück. Firefox bietet zwei Schaltflächen an. Mit dem „Sonnensymbol“ können ihr den hellen Farbmodus und mit dem „Mondsichelsymbol“ den dunklen Farbmodus erzwingen.

Wenn ihr eine der beiden Schaltflächen aktiviert, wird automatisch die andere deaktiviert. Wenn ihr beide deaktiviert, wird wider der Standardmodus verwendet.

Bonus: schnelleres Umschalten der Einstellungen in Chromium-Browsern

Ich kann euch leider nicht sagen, wie ihr die Einstellungen in Safari ändern könnt, da ich keinen Mac benutze (oder Safari nicht oft genug simuliere). Aber ich habe einen netten kleinen Bonus-Tipp für euch. Wenn ihr eine dieser Einstellungen schnell ändern möchtet, können ihr die Funktion „Befehl ausführen“ in Chromium-Browsern verwenden.

Drücken hierzu bei geöffneten Entwicklertools die Tastenkombination „Strg + Umschalt + P“ (oder „Cmd + Umschalt + P“ auf einem Mac) und sucht dann nach der Einstellung, die ihr umschalten möchten:

Ich habe keine entsprechende Funktion in Firefox gefunden, aber vielleicht kennt sie ja jemand von euch?

Fazit

Wenn ihr eine Website entwickelt, die sich je nach Einstellungen des Betriebssystems anders verhält oder anders gerendert wird, sollten ihr dies immer testen. Aber ihr müssen dazu nicht die Einstellungen eures Betriebssystems ändern. Browser haben normalerweise Optionen, um diese zu emulieren.

Wenn jemand von euch bessere Optionen für diese Einstellungen in Firefox oder eine Erweiterung kennt, mit der man diese einfacher umstellen kann, dann teilt den Tipp bitte in den Kommentaren.