Suggerimenti per DevTools: come emulare le funzionalità multimediali relative alle preferenze degli utenti CSS con DevTools

Sofia Emelianova
Sofia Emelianova

Le funzionalità multimediali con preferenze dell'utente ti consentono di definire esperienze web in linea con le preferenze e le esigenze specifiche dell'utente. In altre parole, le funzionalità per i contenuti multimediali con preferenze ti consentono di adattare le tue esperienze utente alle aspettative dei tuoi utenti.

Per migliorare l'esperienza utente sul tuo sito web:

  1. Scopri le possibilità. Scopri tutte le funzionalità multimediali con preferenze degli utenti.
  2. Definisci lo stile delle tue esperienze web. Implementa, ad esempio, modifiche a colori, layout ed dimensioni dell'elemento in base alle preferenze.
  3. Testa l'UI. In DevTools, emula le preferenze e verifica il comportamento del tuo sito web.

DevTools supporta una serie di opzioni di emulazione. Per aiutarti a evitare di cercare e modificare le impostazioni del sistema e del browser, tutte le opzioni di emulazione risiedono in un'unica posizione: nella scheda Rendering di DevTools.

La scheda Rendering.

Le opzioni di emulazione delle preferenze dell'utente includono, a titolo esemplificativo:

  • prefers-color scheme: combinazione di colori chiari o scuri
  • prefers-contrast: contrasto più basso o più alto
  • prefers-reduced-motion: riduci al minimo il movimento
  • prefers-reduced-data: consumi meno traffico o meno

Per un elenco completo di tutte le opzioni di emulazione, consulta Emulare le funzionalità multimediali del CSS.

Per scoprire altri effetti che puoi applicare utilizzando la scheda Rendering, consulta la panoramica della scheda Rendering.

Inoltre, con DevTools, le funzionalità di test non sono limitate al singolo dispositivo su cui stai lavorando. Puoi simulare i dispositivi mobili con la modalità dispositivo.