Emula le funzionalità multimediali del CSS

Sofia Emelianova

Emula varie funzionalità multimediali del CSS con questo riferimento alle opzioni di emulazione nella scheda Rendering.

Emula la funzionalità dei contenuti multimediali del CSS prefers-color-scheme

La funzionalità multimediale del CSS prefers-color-scheme indica se l'utente preferisce una combinazione di colori chiari o scuri.

Per emulare questa condizione:

1. Nella pagina prefers-color-scheme, apri la scheda Rendering.

2. In Emula funzionalità dei contenuti multimediali del CSS prefers-color-scheme, seleziona una delle seguenti opzioni dall'elenco a discesa:

   • Nessuna emulazione
   • prefers-color-scheme:light
   • prefers-color-scheme:dark

3. Ricarica la pagina. Ad esempio:

Emula tipo multimediale CSS (Attiva anteprima di stampa)

La query sui supporti di stampa controlla l'aspetto della pagina quando viene stampata.

Per forzare l'attivazione della modalità di anteprima di stampa nella pagina:

1. Apri la scheda Rendering e in Emula tipo multimediale CSS seleziona stampa.

   

2. Da qui, puoi visualizzare e modificare il CSS, come qualsiasi altra pagina web. Consulta la Guida introduttiva alla visualizzazione e alla modifica dei CSS.

Emula la funzionalità dei contenuti multimediali del CSS forced-colors

La funzionalità dei contenuti multimediali CSS forced-colors indica se lo user agent ha attivato una modalità colori forzata. Un esempio di modalità colori forzata è Contrasto elevato di Windows.

Per emulare questa condizione:

1. Apri la scheda Rendering.

2. In Emula funzionalità dei contenuti multimediali del CSS forced-colors, seleziona una delle seguenti opzioni dall'elenco a discesa:

   • Nessuna emulazione
   • forced-colors:active
   • forced-colors:none

Con forced-colors:active emulato:

Emula la funzionalità dei contenuti multimediali del CSS prefers-contrast

La funzionalità dei contenuti multimediali CSS prefers-contrast indica se l'utente ha richiesto la presentazione dei contenuti web con un valore di contrasto superiore, inferiore o specifico.

Per emulare questa condizione:

1. Apri la scheda Rendering.

2. In Emula funzionalità dei contenuti multimediali del CSS prefers-contrast, seleziona una delle seguenti opzioni dall'elenco a discesa:

   • Nessuna emulazione
   • prefers-contrast:more
   • prefers-contrast:less
   • prefers-contrast:custom

Emula la funzionalità dei contenuti multimediali del CSS prefers-reduced-motion

La funzionalità dei contenuti multimediali CSS prefers-reduced-motion indica se l'utente ha richiesto di ridurre al minimo la quantità di movimento in una pagina.

Per emulare questa condizione:

1. Apri la scheda Rendering di questa demo e prova a scorrere per vedere varie animazioni.
2. Nella sezione Emula funzionalità dei contenuti multimediali del CSS prefers-reduced-motion, seleziona prefers-reduced-motion:reduce.
3. Prova a scorrere di nuovo.

Emula la funzionalità dei contenuti multimediali del CSS prefers-reduced-transparency

La funzionalità dei contenuti multimediali CSS prefers-reduced-transparency indica se l'utente ha richiesto di ridurre gli effetti del livello trasparenti o traslucidi utilizzati sul dispositivo.

La funzionalità prefers-reduced-transparency è disponibile a partire da Chrome 118 e consente di adattare i contenuti web alle preferenze selezionate dall'utente per una minore trasparenza nel sistema operativo, ad esempio l'impostazione Riduci la trasparenza su macOS.

Per emulare questa condizione:

1. Apri la scheda Rendering.
2. Nella sezione Emula funzionalità dei contenuti multimediali del CSS prefers-reduced-transparency, seleziona prefers-reduced-transparency: reduce.
3. Verifica che la pagina venga visualizzata correttamente.

Emula la funzionalità dei contenuti multimediali del CSS color-gamut

La funzionalità dei contenuti multimediali CSS color-gamut indica la gamma di colori supportati dallo user agent e dal dispositivo di output.

Per emulare questa condizione:

1. Apri la scheda Rendering.

2. In Emula funzionalità dei contenuti multimediali del CSS color-gamut, seleziona una delle seguenti opzioni dall'elenco a discesa:

   • Nessuna emulazione
   • color-gamut:srgb: gamma di almeno sRGB o superiore
   • color-gamut:p3: circa la gamma specificata in Spazio colore P3 o superiore.
   • color-gamut:rec2020: circa la gamma specificata in Rec. 2020 o più