Kein Antrag ist nicht immer reduziertes Motion bevorzugt

Viele Entwickler verwenden ein gemeinsames CSS-Snippet, wenn sie sich mit der Medienabfrage für die prefers-reduced-motion befassen. Dieser Snippet zielt darauf ab, alle Bewegungen auf einer Website zu beseitigen, wenn der Benutzer in seinem Betriebssystem reduzierte Bewegungseinstellungen aktiviert hat. Dieser Ansatz ist jedoch nicht immer ideal.

 @media (bevorzugt-reduzierte Bewegung: reduzieren) {
  * {{
    Animationsdauer: 0,01 ms! Wichtig;
    Animationsverarbeitungszahl: 1! Wichtig;
    Übergangsdauer: 0,01 ms! Wichtig;
    Scroll-Verhalten: Auto! Wichtig;
  }
}

Die Bedeutung von prefers-reduced-motion

Die Einstellung prefers-reduced-motion berücksichtigt die Bedenken hinsichtlich der Zugänglichkeit im Zusammenhang mit Anträgen auf dem Bildschirm. Bei Personen mit vestibulären Störungen, Migräne oder Anfällen kann eine übermäßige Animation schwächend sein. Wie Eric Bailey bemerkt, kann das Browsing von Webbrows zu einem Minenfeld unerwarteter Animationen werden.

Subtilität über die Unterdrückung

Während der Drang, alle Animationen vollständig zu entfernen, stark ist, ist dies oft kontraproduktiv. Animation kann die Zugänglichkeit verbessern, beispielsweise durch Klärung komplexer Interaktionen oder Beziehungen zwischen Elementen. Die vollständige Deaktivierung von Animation beseitigt diese vorteilhaften Aspekte. Ein nuancierterer Ansatz ist vorzuziehen. Animationen reduzieren, verlangsamen oder modifizieren, anstatt sie vollständig zu beseitigen.

Ben Nadel zeigte eine überlegene Methode, bei der mehrere @keyframes verwendet wurden, um sowohl eine vollständige Animation als auch eine Version mit reduzierter Bewegung anzubieten. Ein Modal kann beispielsweise standardmäßig sowohl Fade-in als auch scale-in verwenden, aber nur FADE-In, wenn prefers-reduced-motion aktiv ist.

 / * Standard: reduzierte Bewegungsanimation */
@keyframes modal-Enter {
  von {opazität: 0; }
  zu {Opazität: 1; }
}

/ * Überschreiben Sie für No-Preferference: Vollständige Animation */
@media (bevorzugt-reduzierte Bewegung: No-Preference) {
  @keyframes modal-Enter {
    von {opazität: 0; Transformation: Skala (0,7); }
    zu {Opazität: 1; Transformation: Skala (1,0); }
  }
}

Dieser Ansatz priorisiert eine nachdenkliche Lösung mit reduzierter Bewegung gegenüber einem Deckenverbot für alle Bewegungen.

Jenseits von CSS: JavaScript -Animationen

Der anfängliche CSS-Snippet verwaltet nur effektiv CSS-gesteuerte Animationen. JavaScript -Animationen können sich unvorhersehbar verhalten und möglicherweise zu unbeabsichtigten Konsequenzen wie extrem schnellen und desorientierenden Animationen führen, wie Josh Comeau festgestellt hat. Daher muss eine umfassende Strategie sowohl CSS- als auch JavaScript -Animationen berücksichtigen.

Das obige ist der detaillierte Inhalt vonKein Antrag ist nicht immer reduziertes Motion bevorzugt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!