kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

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

Der Browser-Support von prefers-reduced-motion ist gut. Den detaillierten Support entnehmt ihr bitte der Website caniuse.com.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.