Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

CSS prefer-reduced-motion Media Query – Bei Bedarf weniger Bewegung

Die Berücksichtigung von Einstellungen, die Menschen auf ihren Geräten vornehmen, ist für moderne Websites von zentraler Bedeutung. Die Browser stellen immer mehr Funktionen zur Verfügung, die es uns ermöglichen, auf diese Präferenzen einzugehen. Analog zur Abfrage des bevorzugten Farbschemas mit prefers-color-scheme, ist es mit prefers-reduced-motion möglich abzufragen, ob die betrachtende Person eine Seite mit allen Animationen und Bewegungen sehen oder ausdrücklich darauf verzichten möchte.

Bewegungen und Animationen im Web

Im Web werden Animationen häufig verwendet, um eine visuelle Rückmeldung zu geben, z. Bsp. um zu informieren, dass Daten verarbeitet werden oder eine Aktion ausgeführt wurde. Ebenso können bewegte Elemente auf Webseiten eingesetzt werden, um Wahrnehmungen zu beeinflussen. So kann etwa eine Ladeanimation, welche abläuft, während die eigentlichen Inhalte im Hintergrund geladen werden, die gefühlte Ladezeit verkürzen.

Außerdem gibt es noch dekorative Effekte wie animierte Farbverläufe, Parallax-Scrolling, Zoom-Effekte, Hintergrundvideos etc. Im Idealfall verbessern Animationen die User Experience, da sie eine sonst statische Seite in eine interaktive Erfahrung wandeln.

Probleme mit bewegten Website-Elementen

Viele Websites überschwemmen ihr Publikum jedoch mit automatisch ablaufenden, batteriezehrenden und ressourcenhungrigen Animationen. Während viele Menschen Gefallen an solchen Animationen haben, fühlen sich andere durch sie abgelenkt, ausgebremst oder eingeschränkt. Im schlimmsten Fall sorgen animierte Inhalte sogar für gesundheitliche Probleme: sie führen nicht selten zu Konzentrationsproblemen oder Übelkeit. Es besteht also eine Notwendigkeit, dass Menschen die Kontrolle über Animationen im Web haben.

Viele Betriebssysteme verfügen in den Einstellungen zur Barrierefreiheit über eine Option, mit denen eine Präferenz für reduzierte Bewegungen festlegt werden kann. Mit der Media-Query prefers-reduced-motion können wir diese abfragen und die Menge sowie Art der Animationen entsprechend anpassen.

prefers-reduced-motion in CSS

Für die Media Query prefers-reduced-motion gibt es die beiden Werte no-preference und reduce. Wird kein Wert angegeben, wird die Anfrage als true ausgewertet; das reduce muss also nicht unbedingt verwendet werden. Um die Lesbarkeit des Codes zu erhöhen, ist es jedoch sinnvoll, den Wert explizit anzugeben.

// Angewendete Styles, wenn Reduced Motion aktiviert ist
@media screen and (prefers-reduced-motion: reduce) { }

// Angewendete Styles, wenn keine Präferenz angegeben wurde
@media screen and (prefers-reduced-motion: no-preference) { }

Zur Veranschaulichung gehen wir davon aus, dass wir die Aufmerksamkeit betrachtender Personen mit einer auffällige Animation auf einen wichtigen Anmeldebutton lenken wollen. Für Menschen, die sich bewusst gegen Animationen entschieden haben, können wir, unter Nutzung der Media Query prefers-reduced-motion, einfach den selben Button animationsfrei ausliefern.

button {
  // »vibrate«-Keyframes sind an anderer Stelle definiert
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {   
  button {
    animation: none;
  }
}

Wenn es umfangreiches CSS für Animationen gibt, kann es sinnvoll sein, dieses in ein separates Stylesheet auszulagern, welches dann nur bedingt über das Media-Attribut am Link-Element geladen wird. Auf diese Weise können wir für Menschen, die eine Website mit Reduced Motion betrachten möchten, die Datenmenge und Ladezeit reduzieren.

<link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

Verwendung in JavaScript

Wie alle Media-Queries kann prefers-reduced-motion nicht nur im CSS-Kontext, sondern auch in JavaScript abgefragt werden. Damit ist es möglich, Aktionen den Benutzereinstellungen entsprechend dynamisch auszuführen, zu stoppen und zu starten.

// Reduced Motion-Einstellung abfragen
var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');

// Prüfen, ob Media Query stimmt oder nicht unterstützt wird
if (!mediaQuery || mediaQuery.matches) {
  doSomethingWithoutAnimation();
} else {
  doSomethingWithAnimation();
}

// Event Listener, um auf Änderungen der Media Query zu reagieren
mediaQuery.addEventListener('change', function () {
  if (mediaQuery.matches) {
    doSomethingWithoutAnimation();
  } else {
    doSomethingWithAnimation();
  }
});

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the prefers-reduced-motion feature across the major browsers from caniuse.com

Geschrieben von Konstantin Hanke

Benutzerbild

Konstantin arbeitet als Webentwickler bei kulturbanause. Seine Hauptaufgabe ist die technische Umsetzung von klaren, soliden und effizienten Webauftritten und Website-Komponenten. Darüber hinaus kümmert er sich um die Wartung, Optimierung und Weiterentwicklung von bestehenden Websites. Sein besonderes Interesse gilt der Idee von quelloffener, freier Software.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →