Entwicklertools-Tipps: Emulation von Medienfunktionen für CSS-Nutzereinstellungen mit Entwicklertools

Sofia Emelianova

Mit Medienfunktionen für Nutzereinstellungen können Sie die Weboberfläche so gestalten, dass sie den individuellen Vorlieben und Anforderungen der Nutzer entspricht. Mit den Medieneinstellungen können Sie die Nutzererfahrung also an die Erwartungen der Nutzer anpassen.

So können Sie die Nutzerfreundlichkeit Ihrer Website verbessern:

1. Entdecken Sie die Möglichkeiten. Weitere Informationen zu den Medienfunktionen für Nutzereinstellungen
2. Webinhalte stilisieren Sie können beispielsweise Änderungen an Farbe, Layout und Elementgröße basierend auf den Einstellungen implementieren.
3. Testen Sie die Benutzeroberfläche. Emulieren Sie in den DevTools die Einstellungen und testen Sie, wie sich Ihre Website verhält.

DevTools unterstützt eine Vielzahl von Emulationsoptionen. Damit Sie nicht nach System- und Browsereinstellungen suchen und diese nicht anpassen müssen, befinden sich alle Emulationen an einem Ort: auf dem Tab Rendering in den DevTools.

Zu den Emulationsmöglichkeiten der Nutzereinstellungen gehören unter anderem:

• prefers-color scheme – helles oder dunkles Farbschema
• prefers-contrast – niedriger oder höherer Kontrast
• prefers-reduced-motion – Bewegung minimieren oder nicht
• prefers-reduced-data – weniger Traffic verbrauchen oder nicht

Eine umfassende Liste aller Emulationsoptionen finden Sie unter CSS-Medienfunktionen emulieren.

Weitere Informationen zu den Effekten, die Sie auf dem Tab Rendering anwenden können, finden Sie im Hilfeartikel Tab „Rendering“.

Außerdem sind Ihre Testfunktionen mit DevTools nicht auf das einzelne Gerät beschränkt, an dem Sie gerade arbeiten. Sie können Mobilgeräte mit dem Gerätemodus simulieren.