prefers-reduced-motion: a volte meno movimento è più

La query supporti di movimento prefers-ridotto rileva se l'utente ha richiesto il sistema operativo per ridurre al minimo la quantità di animazioni o movimenti utilizzati.

Thomas Steiner

Non a tutti piacciono le animazioni o le transizioni decorative e alcuni utenti notano il movimento definitivo quando ci si trova ad affrontare lo scorrimento con parallasse, effetti di zoom e altro ancora. Contenuti multimediali preferiti dall'utente la query prefers-reduced-motion ti consente di progettare una variante del tuo sito basata sul movimento per gli utenti che hanno espresso questa preferenza.

Supporto dei browser

• 74
• 79
• 63
• 10,1

Origine

Troppo movimento nella vita reale e sul web

L'altro giorno stavo pattinando sul ghiaccio con i miei figli. Era una bella giornata, il sole splendeva e il ghiaccio la pista di pattinaggio era piena di gente ⛸. L'unico problema: non riesco a gestire bene la folla. Con così molti bersagli mobili, non riesco a concentrarmi su nulla e finisco perdermi e avere la sensazione di completa un sovraccarico visivo, un po' come guardare un formicaio 🐜.

Sovraccarico visivo nella vita reale.

A volte, può accadere la stessa cosa sul web: con annunci lampeggianti, fantasiosi effetti parallasse, sorprendenti rivelare animazioni, video con riproduzione automatica e altro ancora, il web a volte può essere molto faticoso... Fortunatamente, a differenza della vita reale, c'è una soluzione. La query multimediale CSS prefers-reduced-motion consente agli sviluppatori di creare una variante di una pagina per gli utenti che preferiscono ridurre il movimento. Questo può consistere nell'astenersi dalla riproduzione automatica dei video la disattivazione di alcuni effetti puramente decorativi, per riprogettare completamente una pagina per determinati utenti.

Prima di approfondire la funzionalità, faccio un passo indietro e penso a quali animazioni vengono utilizzate sul web. Se vuoi, puoi anche saltare le informazioni di base e passa direttamente ai dettagli tecnici.

Animazione sul web

Spesso l'animazione viene utilizzata per fornire feedback all'utente, ad esempio per fargli sapere che è stata ricevuta un'azione ed è in fase di elaborazione. Ad esempio, su un sito web di shopping, un prodotto può essere animato in modo da "volare" in un carrello virtuale, rappresentato come un'icona nell'angolo in alto a destra di del sito.

Un altro caso d'uso prevede l'uso del movimento per percezione degli utenti compromessi utilizzando una combinazione di scheletri, metadati contestuali e anteprime di immagini di bassa qualità per occupano molto tempo dell'utente e rendono l'intera esperienza più veloce. L'idea è dare di fornire un contesto all'utente e nel frattempo caricarle il più rapidamente possibile.

Infine, ci sono effetti decorativi come sfumature animate, scorrimento parallasse, sfondo video e molti altri. Anche se molti utenti apprezzano queste animazioni, ad alcuni non piacciono perché si sentono distratti o rallentati da loro. Nel peggiore dei casi, gli utenti potrebbero persino soffrire di movimenti malattia come se fosse un'esperienza reale, quindi per questi utenti la riduzione delle animazioni è un indispensabili.

Disturbo dello spettro vestibolare attivato dal movimento

Esperienza utente distrazione o nausea da contenuti animati. Ad esempio, le animazioni a scorrimento possono causare disturbi vestibolari quando elementi diversi dalla associato allo scorrimento si muovono molto spesso. Ad esempio, animazioni con scorrimento parallasse può causare disturbi vestibolari perché gli elementi di sfondo si muovono con una frequenza diversa rispetto a quelli in primo piano elementi. Le reazioni al disturbo vestibolare (dell'orecchio interno) comprendono vertigini, nausea ed emicrania mal di testa e a volte necessitano di riposo a letto per riprendersi.

Rimuovi il movimento sui sistemi operativi

Molti sistemi operativi dispongono di impostazioni di accessibilità che consentono di specificare una preferenza per la riduzione movimento per molto tempo. I seguenti screenshot mostrano la preferenza Riduci il movimento di macOS Mojave e Preferenza di Android Pie Rimuovi le animazioni. Quando sono selezionate, queste preferenze causano per non utilizzare effetti decorativi come animazioni di avvio di app. Le applicazioni stesse possono dovrebbe rispettare anche questa impostazione e rimuovere tutte le animazioni non necessarie.

Rimuovi il movimento sul web

Query supporti di livello 5 offre la riduzione dell'animazione le preferenze utente del web. Le query supporti consentono agli autori di testare ed eseguire query su valori o caratteristiche dello user agent o del dispositivo di visualizzazione, indipendentemente dal documento visualizzato. La query supporti È in uso prefers-reduced-motion per rilevare se l'utente ha impostato una preferenza di sistema operativo per ridurre al minimo la quantità di animazioni o movimento che utilizza. Possono avere due valori possibili:

• no-preference: indica che l'utente non ha espresso preferenze riguardo alle operazioni sottostanti. di un sistema operativo completo. Il valore di questa parola chiave viene valutato come false nel contesto booleano.
• reduce: indica che l'utente ha impostato una preferenza di sistema operativo per indicare che interfacce dovrebbero ridurre al minimo il movimento o l'animazione, preferibilmente al punto in cui tutti i componenti il movimento viene rimosso.

Lavorare con la query multimediale da contesti CSS e JavaScript

Come per tutte le query supporti, è possibile verificare prefers-reduced-motion da un contesto CSS e da una Contesto JavaScript.

Per illustrare entrambi, supponiamo di avere un importante pulsante di registrazione su cui voglio che l'utente faccia clic. IO potresti definire una "vibrazione" che attiri l'attenzione ma da bravo cittadino del web giocherò solo ma non per tutti gli altri utenti che sono esplicitamente d'accordo con le animazioni, che hanno disattivato le animazioni o che utilizzano browser che non comprendono la query multimediale.

/*
  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;
  }
}

Nota : se disponi di molti CSS correlati alle animazioni, puoi evitare che gli utenti che non lo hanno scaricato possano scaricarli esternalizzando tutti i file CSS relativi alle animazioni a un foglio di stile separato che verrà caricato solo in modo condizionale utilizzando l'attributo media nell'elemento link 😎: <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

Per spiegare come lavorare con prefers-reduced-motion con JavaScript, immagina di avere ha definito un'animazione complessa API Web Animations. Mentre le regole CSS verrà attivata dinamicamente dal browser quando la preferenza dell'utente cambia, per JavaScript Animazioni, devo ascoltare personalmente le modifiche e poi interrompere manualmente la mia funzionalità potenzialmente in corso animazioni (o riavviale se l'utente lo consente):

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

Tieni presente che le parentesi all'interno della query supporti effettiva sono obbligatorie:

Cosa non fare

window.matchMedia('prefers-reduced-motion: reduce');

Cosa fare

window.matchMedia('(prefers-reduced-motion: reduce)');

Utilizzo della query multimediale da <picture> contesti

Un caso d'uso interessante è fare in modo che la riproduzione di un file AVIF, WebP o GIF animato dipendesse dalla Attributo media. Se il valore di (prefers-reduced-motion: no-preference) è true, è sicuro mostra la versione animata, altrimenti la versione statica:

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

Puoi vedere l'esempio che segue. Prova a modificare le preferenze di movimento del dispositivo per vedere la differenza.

Scopri le preferenze dell'utente al momento della richiesta

Intestazione del suggerimento client Sec-CH-Prefers-Reduced-Motion consente ai siti di ottenere le preferenze di movimento dell'utente facoltativamente al momento della richiesta, consentendo ai server di incorporare il codice CSS corretto per motivi legati alle prestazioni.

Demo

ho creato una piccola demo sulla base dell'incredibile 🐈 Gatti con stato HTTP. Prima di tutto, dedica un momento ad apprezzare la battuta, esilarante e aspetto. Ora che sei tornato, vediamo le demo. Quando scorri, ogni gatto con stato HTTP appare alternativamente dal lato destro o sinistro. La velocità a 60 FPS è burrosa ma, come detto in precedenza, ad alcuni utenti potrebbe non piacerla o addirittura avere problemi di movimento, quindi è programmata per rispettare prefers-reduced-motion. Funziona anche in modo dinamico, quindi gli utenti possono modificare le preferenze al volo, senza bisogno di ricaricare. Se un utente preferisce ridurre i movimenti, le animazioni di rivelazione non necessarie non sono più disponibili e rimane solo il regolare movimento di scorrimento. La il seguente screencast mostra la demo in azione:

Video del prefers-reduced-motion: demo app

Conclusioni

Rispettare le preferenze degli utenti è fondamentale per i siti web moderni e i browser stanno esponendo sempre di più per consentire agli sviluppatori web di farlo. Un altro esempio lanciato è prefers-color-scheme, che rileva se l'utente preferisce una combinazione di colori chiari o scuri. Puoi scoprire tutto quello che c'è da sapere prefers-color-scheme nel mio articolo Hello Darkness, My Old Friend 🌒.

Il CSS Working Group sta standardizzando query multimediali preferenze utente come prefers-reduced-transparency: (rileva se l'utente preferisce una trasparenza ridotta), prefers-contrast (rileva se l'utente ha richiesto al sistema di aumentare o diminuire la quantità di contrasto tra colori adiacenti), e inverted-colors (rileva se l'utente preferisce i colori invertiti).

(Bonus) Forzare la riduzione del movimento su tutti i siti web

Non tutti i siti utilizzeranno prefers-reduced-motion o forse non in modo sufficiente per i tuoi gusti. Se, per qualsiasi motivo, desideri interrompere il movimento su tutti i siti web, puoi farlo. Un modo per creare questa operazione consiste nell'inserire un foglio di stile con il seguente CSS in ogni pagina web visitata. Là ci sono diversi estensioni del browser disponibili (a tuo rischio e pericolo) che ti consentono di ottenere questo risultato.

@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;
  }
}

Funziona così: il CSS precedente sostituisce le durate di tutte le animazioni e le transizioni così breve da non essere più percettibile. Alcuni siti web dipendono da un'animazione affinché possano funzionare correttamente (probabilmente perché un determinato passaggio dipende dall'attivazione evento animationend), l'approccio più radicale animation: none !important; non funzionerebbe. Anche il precedente attacco non ha avere successo su tutti i siti web (ad esempio, non è possibile interrompere il movimento avviato utilizzando API Web Animations), pertanto assicurati di la disattivi quando noti un malfunzionamento.

Link correlati

• Bozza dell'editor più recente di Livello 5 delle query multimediali del modello.
• prefers-reduced-motion attivo Stato della piattaforma Chrome.
• prefers-reduced-motion Bug di Chromium.
• Luce lampeggiante Intento di implementare la pubblicazione.

Ringraziamenti

Un grande ringraziamento a Stephen McGruer, che ha implementato prefers-reduced-motion in Chrome e, insieme a Rob Dodson: ha esaminato anche questo documento. Immagine hero di Hannah Cauhepe su Unsplash.