bevorzugt-reduzierte-Bewegung: Manchmal ist weniger Bewegung mehr

Mit der Medienabfrage „präferenz-reduktion“ wird erkannt, ob der Nutzer des Betriebssystems, um den verwendeten Animations- oder Bewegungsumfang zu minimieren.

Thomas Steiner

Nicht jeder mag dekorative Animationen oder Übergänge und einige Nutzende erleben sofort Bewegungen. beim Parallaxe-Scrollen, Zoomeffekten oder anderen Faktoren. Medien von Nutzereinstellungen Mit der Abfrage prefers-reduced-motion können Sie eine Variante Ihrer Website mit reduzierten Bewegungen für Nutzer entwerfen, die haben diese Präferenz geäußert.

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 das Eis Die Eisbahn war voll mit Leuten ⛸. Das einzige Problem dabei: Ich komme nicht gut mit Menschenmengen zurecht. Damit Ich kann mich nicht auf etwas konzentrieren und verliert am Ende das Gefühl, vollständig zu sein. Das ist fast so, als würde man auf einen Ameisenhaufen starren 🐜.

</ph>

Gelegentlich kann das auch im Web passieren: Blinkende Anzeigen, Parallaxe-Effekte, überraschende Animationen, automatisch wiedergegebene Videos und mehr zeigen, kann das Web manchmal ziemlich überwältigend sein... Zum Glück gibt es dafür – anders als im richtigen Leben – eine Lösung. CSS-Medienabfrage Mit prefers-reduced-motion können Entwickler eine Variante einer Seite für Nutzer erstellen, die lieber mit eingeschränkter Bewegung. Sie können z. B. auf Autoplay-Videos verzichten, Deaktivierung bestimmter rein dekorativer Effekte oder der kompletten Neugestaltung einer Seite für bestimmte Nutzende.

Bevor ich mich mit der Funktion beschäftige, möchte ich einen Schritt zurücktreten und darüber nachdenken, wofür Animationen eingesetzt werden können. im Web. Wenn Sie möchten, können Sie auch die Hintergrundinformationen Machen Sie sich direkt mit den technischen Details vertraut.

Animationen im Web

Animationen werden oft verwendet, um dem Nutzer Feedback zu geben, z. B. um ihn darauf hinzuweisen, eine empfangene Aktion erfolgt ist und verarbeitet wird. Auf einer Shopping-Website könnte ein Produkt zum „Fliegen“ animiert werden, in einen virtuellen Warenkorb, das als Symbol in der oberen rechten Ecke auf der Website.

Ein weiterer Anwendungsfall ist die Nutzung von Bewegung, Hacker-Wahrnehmung mit einer Mischung aus Skeleton Screens, kontextbezogenen Metadaten und Bildvorschauen niedriger Qualität, nehmen viel Zeit in Anspruch und sorgen dafür, dass sich der gesamte Vorgang schneller anfühlt. Der Gedanke ist, und die Dinge so schnell wie möglich laden.

Außerdem gibt es dekorative Effekte wie animierte Farbverläufe, das Parallaxe-Scrollen, Videos und einige andere. Viele Nutzer mögen Animationen, doch manche Nutzer mögen sie nicht, fühlen sie sich dadurch abgelenkt oder verlangsamt. Im schlimmsten Fall können die Nutzenden Übelkeit wie bei einem echten Leben. Für diese Nutzer ist die Reduzierung der Animationen ein medizinischer .

Bewegungsbedingte Störung des vestibulären Spektrums

Einige Nutzer Ablenkung oder Übelkeit von animierten Inhalten. Scroll-Animationen können beispielsweise zu vestibulären Störungen führen, wenn andere Elemente -Element des Scrollens sehr häufig verschoben werden. Zum Beispiel Parallaxe-Scrollanimationen kann zu vestibulären Störungen führen, da sich Hintergrundelemente mit einer anderen Geschwindigkeit als der Vordergrund bewegen Elemente. Reaktionen auf veestibuläre Erkrankungen (Innerohr) sind Schwindel, Übelkeit und Migräne Kopfschmerzen und erfordern manchmal Bettruhe, um sich zu erholen.

Bewegung unter Betriebssystemen entfernen

Viele Betriebssysteme haben Einstellungen für Bedienungshilfen, mit denen reduzierte über längere Zeit bewegen. Die folgenden Screenshots zeigen die Einstellung Bewegungen reduzieren von macOS Mojave und Die Einstellung Animationen entfernen von Android Pie Wenn diese Einstellungen aktiviert sind, keine dekorativen Effekte wie App-Startanimationen. Anwendungen selbst können und sollte diese Einstellung ebenfalls berücksichtigen und alle unnötigen Animationen entfernen.

Bewegung aus dem Web entfernen

Mediensuchanfragen Stufe 5 sorgt für reduzierte Bewegungsabläufe. auch im Web bevorzugt. Mit Medienabfragen können Autoren Werte oder Funktionen testen und abfragen des User-Agents oder Anzeigegeräts unabhängig vom gerenderten Dokument. Die Medienabfrage prefers-reduced-motion wird verwendet um festzustellen, ob Nutzer in den Einstellungen des Betriebssystems die Anzahl der Animationen oder Bewegung, die sie verwendet. Zwei mögliche Werte sind möglich:

• no-preference: Gibt an, dass der Nutzer im zugrunde liegenden Operator keine Präferenz festgelegt hat. System. Dieser Keyword-Wert wird im booleschen Kontext als false ausgewertet.
• reduce: Gibt an, dass der Nutzer eine Betriebssystemeinstellung festgelegt hat, die angibt, dass Oberflächen sollten Bewegungen oder Animationen minimieren, vorzugsweise so weit, dass alle nicht wesentlichen Elemente und Bewegung entfernt.

Mit der Medienabfrage aus CSS- und JavaScript-Kontexten arbeiten

Wie bei allen Medienabfragen kann prefers-reduced-motion aus einem CSS-Kontext und einem JavaScript-Kontext

Zur Veranschaulichung gehen wir davon aus, dass die Nutzenden auf eine wichtige Anmeldeschaltfläche klicken sollen. Ich eine auffällige „Vibration“, aber als guten Bürger im Web spiele ich und nicht für alle anderen Nutzer, also z. B. 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;
  }
}

Um zu veranschaulichen, wie man mit prefers-reduced-motion mit JavaScript arbeitet, stellen wir uns vor, ich habe eine komplexe Animation mit Web Animations API. Während CSS-Regeln Wird dynamisch vom Browser ausgelöst, wenn sich die Nutzereinstellung ändert (für JavaScript) Animationen, die ich selbst auf Änderungen warten muss, und die potenzielle In-Flight-Aktivität dann manuell stoppen. Animationen erstellen (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“. Wenn (prefers-reduced-motion: no-preference) true ergibt, ist Folgendes sicher: die animierte Version anzeigen, andernfalls die statische Version:

<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>

Hier ein Beispiel: Wechseln Sie die Bewegungseinstellungen Ihres Geräts, um den Unterschied zu sehen.

Präferenzen des Nutzers zum Zeitpunkt der Anfrage ermitteln

Header des Sec-CH-Prefers-Reduced-Motion-Client-Hinweises können Websites die Bewegungseinstellungen des Nutzers optional zum Zeitpunkt der Anfrage abrufen, sodass Server aus Leistungsgründen den richtigen CSS-Code einfügen können.

Demo

Ich habe eine kleine Demo erstellt, die auf dem großartigen Video von Rogério Vicente basiert. 🐈 HTTP-Statuskatzen. Nimm dir einen Moment Zeit, um den Witz zu würdigen, und ich warte. Nun, da Sie wieder da sind, möchte ich Ihnen die Demo ansehen. Beim Scrollen werden die HTTP-Statuskategorien abwechselnd von der rechten oder linken Seite erscheint. Die 60 fps sind perfekt für den Alltag. Allerdings kann es, wie bereits erwähnt, einigen Nutzern nicht gefallen oder sie übersehen. Demo ist so programmiert, dass prefers-reduced-motion berücksichtigt wird. Das funktioniert sogar dynamisch, während sie die Einstellungen ändern, ohne dass der Browser neu geladen werden muss. Wenn Nutzende kleinere Bewegungen bevorzugen, nicht notwendige Enthüllungsanimationen werden verschwunden, und nur die normale Scrollbewegung bleibt übrig. Die Der folgende Screencast zeigt die Demo in Aktion:

Ergebnisse

Bei modernen Websites ist die Berücksichtigung von Nutzereinstellungen entscheidend – und Browser bieten immer mehr Möglichkeiten, , damit Webentwickler dies tun können. Ein weiteres Beispiel ist prefers-color-scheme, die erkennt, ob die Nutzenden ein helles oder ein dunkles Farbschema bevorzugen. Sie können alles über prefers-color-scheme in meinem Artikel Hallo Dunkelheit, mein alter Freund 🌒.

Die Preisvergleichsportal-Arbeitsgruppe standardisiert Medienabfragen mit Nutzereinstellungen wie prefers-reduced-transparency (erkennt, ob der Nutzer eine geringere Transparenz bevorzugt) prefers-contrast (erkennt, ob der Nutzer das System aufgefordert 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, wird ein Style-Sheet mit folgendem CSS-Code in jede von Ihnen besuchte Webseite eingefügt. Es sind mehrere Browsererweiterungen (Verwendung auf eigenes Risiko!), die dies 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 überschreibt das bisherige CSS die Dauer aller Animationen und Übergänge. so kurz, dass sie nicht mehr auffallen. Da einige Websites auf Animationen angewiesen sind, um richtig zu funktionieren. Vielleicht hängt ein bestimmter Schritt davon ab, animationend-Ereignis), würde die radikalere animation: none !important;-Methode nicht funktionieren. Auch der vorherige Hack wurde nicht ist garantiert auf allen Websites erfolgreich (z. B. kann keine Bewegung gestoppt werden, die mithilfe des Web Animations API). deaktivieren Sie es, wenn Sie Fehler bemerken.

Weitere Informationen

• Neueste Version der Redaktion des Medienabfragen – Stufe 5 Spezifikation.
• prefers-reduced-motion an Status der Chrome-Plattform.
• prefers-reduced-motion Chromium-Fehler.
• Blinken Veröffentlichungsabsicht implementieren

Danksagungen

Ein großes Dankeschön an Stephen McGruer, der prefers-reduced-motion in Chrome und in Verbindung mit Rob Dodson hat dieses Dokument ebenfalls gelesen. Hero-Image von Hannah Cauhepe auf Unsplash.