Die Medienabfrage „Bevorzugt-reduzierte Bewegung“ erkennt, ob der Nutzer vom Betriebssystem angefordert hat, die Menge der verwendeten Animationen oder Bewegungen zu minimieren.
Nicht jeder mag dekorative Animationen oder Übergänge und manche Nutzer erleben bei Parallaxe, Zoomeffekten usw. sofort Bewegungskrankheit. Mit der Medienabfrage prefers-reduced-motion mit Nutzereinstellung können Sie eine Variante Ihrer Website mit reduzierter Bewegung für Nutzer entwerfen, die diese Präferenz geäußert haben.
Zu viel Bewegung im wirklichen Leben und im Web
Neulich war ich mit meinen Kindern Eislaufen. Es war ein wundervoller Tag, die Sonne schien und die Eisbahn war voller Menschen ⛸. Das einzige Problem damit: Ich komme nicht gut mit Menschenmengen zurecht. Bei so vielen beweglichen Zielen kann ich mich nicht auf etwas konzentrieren und habe am Ende das Gefühl, dass ich mich vollkommen übertreibt habe, fast so, als würde ich auf einen Ameisenhaufen starren 🐜.
Gelegentlich kann das auch im Web passieren: Bei blinkenden Anzeigen, ausgefallenen Parallaxe-Effekten, überraschenden Enthüllungsanimationen, automatisch wiedergegebenen Videos usw. kann das Web manchmal ziemlich überwältigend sein... Glücklicherweise gibt es dafür eine Lösung. Mit der CSS-Medienabfrage prefers-reduced-motion können Entwickler eine Variante einer Seite für Nutzer erstellen, die weniger Bewegung bevorzugen. Dabei kann es sich beispielsweise um den Verzicht auf die automatische Wiedergabe von Videos, die Deaktivierung bestimmter rein dekorativer Effekte oder die vollständige Neugestaltung einer Seite für bestimmte Nutzer handeln.
Bevor wir uns die Funktion genauer ansehen, denken wir noch einmal darüber nach, für welche Animationen wir im Web eingesetzt werden. Wenn Sie möchten, können Sie auch die Hintergrundinformationen überspringen und direkt mit den technischen Details weitermachen.
Animationen im Web
Animationen werden häufig verwendet, um dem Nutzer Feedback zu geben, z. B. um ihm mitzuteilen, dass eine Aktion empfangen wurde und verarbeitet wird. Auf einer Shopping-Website könnte ein Produkt beispielsweise so animiert werden, dass es in einen virtuellen Einkaufswagen „fliegt“, das als Symbol oben rechts auf der Website dargestellt wird.
Ein weiterer Anwendungsfall ist die Nutzung von Bewegung, um die Wahrnehmung des Nutzers zu hacken. Dazu wird eine Mischung aus Rasterbildschirmen, kontextbezogenen Metadaten und Bildvorschauen niedriger Qualität verwendet, um viel Zeit des Nutzers zu kosten und die gesamte Nutzung schneller zu gestalten. Der Grundgedanke ist, dem Nutzer Kontext zu dem zu geben, was kommt, und gleichzeitig die Dinge so schnell wie möglich laden.
Außerdem gibt es dekorative Effekte wie animierte Farbverläufe, Parallaxe-Scrollen, Hintergrundvideos und vieles mehr. Viele Nutzer mögen solche Animationen, aber einige mögen sie nicht, weil sie sich von ihnen abgelenkt oder verlangsamt fühlen. Im schlimmsten Fall können Nutzer sogar unter Bewegungskrankheit leiden, als ob es sich um eine echte Erfahrung handelt. Für diese Nutzer ist die Reduzierung von Animationen also medizinisch notwendig.
Bewegungsbedingte Störung des vestibulären Spektrums
Einige Nutzer werden durch animierte Inhalte abgelenkt oder Übelkeit erleben. Scrollanimationen können beispielsweise zu vestibulären Störungen führen, wenn sich andere Elemente als das mit dem Scrollen verbundene Hauptelement stark bewegen. Parallaxe-Scrollanimationen können beispielsweise zu vestibulären Störungen führen, da sich Hintergrundelemente mit einer anderen Geschwindigkeit bewegen als Vordergrundelemente. Reaktionen auf veestibuläre (Innerohr-)Erkrankungen sind Schwindel, Übelkeit und Migräne. Manchmal ist Bettruhe erforderlich, um sich zu erholen.
Bewegung unter Betriebssystemen entfernen
Viele Betriebssysteme haben über lange Zeit Bedienungshilfen, mit denen reduzierte Bewegungen bevorzugt werden können. Die folgenden Screenshots zeigen die Einstellungen Bewegungen reduzieren von macOS Mojave und die Einstellung Animationen entfernen von Android Pie. Wenn diese Einstellungen aktiviert sind, verwendet das Betriebssystem keine dekorativen Effekte wie App-Startanimationen. Auch die Anwendungen selbst können und sollten diese Einstellung berücksichtigen und alle unnötigen Animationen entfernen.
Bewegung aus dem Web entfernen
Media Queries Level 5 sorgt dafür, dass Nutzer die Einstellung „Reduzierte Bewegung“ auch im Web nutzen. Mit Medienabfragen können Autoren Werte oder Funktionen des User-Agents oder Anzeigegeräts unabhängig vom gerenderten Dokument testen und abfragen. Mit der Medienabfrage prefers-reduced-motion wird ermittelt, ob der Nutzer eine Betriebssystemeinstellung festgelegt hat, um die Menge der verwendeten Animationen oder Bewegungen zu minimieren. Zwei mögliche Werte sind möglich:
no-preference: Gibt an, dass der Nutzer im zugrunde liegenden Betriebssystem keine Einstellung vorgenommen hat. Dieser Keyword-Wert wird im booleschen Kontext alsfalseausgewertet.reduce: Gibt an, dass der Nutzer eine Betriebssystemeinstellung festgelegt hat, die angibt, dass Schnittstellen Bewegungen oder Animationen minimieren sollen, vorzugsweise bis zu dem Punkt, an dem alle unwichtigen Bewegungen entfernt werden.
Mit der Medienabfrage aus CSS- und JavaScript-Kontexten arbeiten
Wie bei allen Medienabfragen kann prefers-reduced-motion aus einem CSS-Kontext und aus einem JavaScript-Kontext geprüft werden.
Um beides zu veranschaulichen, nehmen wir an, ich habe eine wichtige Anmeldeschaltfläche, auf die der Nutzer klicken soll. Ich könnte eine auffällige Vibrationsanimation definieren, aber als ein vertrauenswürdiger Webnutzer spiele ich sie nur für Nutzer ab, die mit Animationen nicht einverstanden sind, und nicht für alle anderen Nutzer. Das können Nutzer sein, die Animationen deaktiviert haben, oder Nutzer von Browsern, die die Medienabfrage nicht verstehen.
/*
If the user has expressed their preference for
reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
button {
/* `vibrate` keyframes are defined elsewhere */
animation: vibrate 0.3s linear infinite both;
}
}
Nehmen wir an, ich habe eine komplexe Animation mit der Web Animations API definiert, um die Arbeit mit prefers-reduced-motion mit JavaScript zu veranschaulichen. Während CSS-Regeln vom Browser dynamisch ausgelöst werden, wenn sich die Nutzereinstellungen ändern, muss ich bei JavaScript-Animationen selbst auf Änderungen warten und meine potenziell laufenden Animationen manuell stoppen (oder neu starten, wenn der Nutzer es zulässt):
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
console.log(mediaQuery.media, mediaQuery.matches);
// Stop JavaScript-based animations.
});
Beachten Sie, dass die Klammern um die eigentliche Medienabfrage obligatorisch sind:
window.matchMedia('prefers-reduced-motion: reduce');
window.matchMedia('(prefers-reduced-motion: reduce)');
Mit der Medienabfrage aus <picture>-Kontexten arbeiten
Ein interessanter Anwendungsfall besteht darin, die Wiedergabe einer animierten AVIF-, WebP- oder GIF-Datei vom Attribut media abhängig zu machen. Wenn (prefers-reduced-motion: no-preference) den Wert true ergibt, kann ohne Bedenken die animierte und ansonsten die statische Version angezeigt werden:
<picture>
<!-- Animated versions. -->
<source
srcset="nyancat.avifs"
type="image/avif"
media="(prefers-reduced-motion: no-preference)"
/>
<source
srcset="nyancat.gif"
type="image/gif"
media="(prefers-reduced-motion: no-preference)"
/>
<!-- Static versions. -->
<img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>
Unten sehen Sie ein Beispiel. Wechseln Sie die Bewegungseinstellungen Ihres Geräts, um den Unterschied zu sehen.
Präferenzen des Nutzers zum Zeitpunkt der Anfrage ermitteln
Mit dem Sec-CH-Prefers-Reduced-Motion-Clienthinweisheader können Websites die Bewegungseinstellungen des Nutzers optional zum Zeitpunkt der Anfrage abrufen. So können Server aus Leistungsgründen das richtige CSS inline einbinden.
Demo
Ich habe eine kleine Demo erstellt, die auf den 🐈 HTTP-Status-Katzen von Rogério Vicente basiert. Erstens: Nimm dir einen Moment Zeit, um den Witz zu
schätzen. Er ist urkomisch und ich warte. Jetzt, wo Sie wieder da sind, möchte ich Ihnen die Demo vorstellen. Wenn Sie nach unten scrollen, wird der HTTP-Status abwechselnd von rechts oder links angezeigt. Es ist eine flüssige Animation mit 60 fps, aber wie oben beschrieben, kann es einigen Nutzern nicht gefallen oder sie werden eventuell sogar übel. Daher ist die Demo so programmiert, dass prefers-reduced-motion berücksichtigt wird. Das funktioniert sogar dynamisch, d. h., Nutzer können ihre Einstellungen spontan ändern, ohne dass eine Aktualisierung erforderlich ist. Wenn ein Nutzer weniger Bewegung vorzieht, werden die nicht erforderlichen Animationen zum Einblenden wegfallen und nur die normale Scrollbewegung bleibt übrig. Der folgende Screencast zeigt die Demo in Aktion:
prefers-reduced-motion-Demo
App
Ergebnisse
Bei modernen Websites ist es wichtig, Nutzereinstellungen zu berücksichtigen. Browser stellen dafür immer mehr Funktionen bereit, mit denen Webentwickler dies tun können. Ein weiteres Beispiel ist prefers-color-scheme, das erkennt, ob Nutzer ein helles oder dunkles Farbschema bevorzugen. Weitere Informationen über prefers-color-scheme findest du in meinem Artikel Hallo Dunkelheit, mein alter Freund 🌒.
Die CSS-Arbeitsgruppe standardisiert derzeit mehr Medienabfragen mit nutzerspezifischen Einstellungen, z. B. prefers-reduced-transparency (erkennt, ob der Nutzer geringere Transparenz bevorzugt), prefers-contrast (erkennt, ob der Nutzer das System angefordert hat, den Kontrast zwischen benachbarten Farben zu erhöhen oder zu verringern) und inverted-colors (erkennt, ob der Nutzer umgekehrte Farben bevorzugt).
(Bonus) Reduzierte Bewegung auf allen Websites erzwingen
Nicht jede Website verwendet prefers-reduced-motion oder dies ist für Sie vielleicht nicht signifikant genug.
Wenn ihr die Bewegungen auf allen Websites stoppen möchtet, ist das möglich. Eine Möglichkeit dafür besteht darin, ein Stylesheet mit folgendem CSS-Code in jede von Ihnen besuchte Webseite einzufügen. Es gibt verschiedene Browsererweiterungen, die dies auf eigenes Risiko ermöglichen.
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
transition-delay: 1ms !important;
}
}
Dabei werden mit dem obigen CSS die Dauer aller Animationen und Übergänge so kurz überschrieben, dass sie nicht mehr wahrgenommen werden. Da bei einigen Websites die Ausführung einer Animation erforderlich ist, um richtig zu funktionieren (möglicherweise weil ein bestimmter Schritt vom Auslösen des animationend-Ereignisses abhängt), würde der radikalere animation: none !important;-Ansatz nicht funktionieren. Selbst der obige Hack ist nicht garantiert, dass er auf allen Websites erfolgreich ist (er kann beispielsweise keine Bewegung stoppen, die über die Web Animations API initiiert wurde). Daher ist es wichtig, den Hack zu deaktivieren, wenn Sie eine Störung bemerken.
Weitere Informationen
- Aktueller Entwurf des Redakteurs der Spezifikation Media Queries Level 5
prefers-reduced-motionfür den Status der Chrome-Plattform.prefers-reduced-motionChromium-Fehler.- Klicken Sie auf Intent to Implement Post (Absicht zum Implementieren von Beiträgen).
Danksagungen
Ein großes Dankeschön an Stephen McGruer, der prefers-reduced-motion in Chrome implementiert und – zusammen mit Rob Dodson – diesen Artikel ebenfalls gelesen hat.
Hero-Image von Hannah Cauhepe auf Unsplash.