Applica altri effetti: attiva il tema scuro automatico, emula la messa a fuoco e altro ancora

Sofia Emelianova

Scopri gli effetti utili da applicare alla tua pagina con questo riferimento alle opzioni della scheda Rendering.

Evidenzia frame dell'annuncio

Per verificare se i frame sono taggati come annunci:

1. Apri la scheda Rendering in questa demo e seleziona Inserisci frame degli annunci in evidenza.
2. Osserva il frame dell'annuncio evidenziato in rosso.

Emula una pagina con lo stato attivo

Se imposti lo stato attivo dalla pagina a DevTools, alcuni elementi di overlay vengono nascosti automaticamente se attivati dall'elemento attivo. Ad esempio, elenchi a discesa, menu o selettori di date. L'opzione check_box Emula una pagina con lo stato attivo ti consente di eseguire il debug di un elemento come se fosse attivo.

Attenzione: se questa opzione è attiva, il valore document.visibilityState è impostato su visible e l'evento visibilitychange non viene attivato. Per ulteriori informazioni, consulta l'API Page Visibility.

Per emulare una pagina con lo stato attivo:

1. Apri una pagina con l'elemento da eseguire il debug, ad esempio il sito web di YouTube con la barra di ricerca.

2. Nella pagina, apri la scheda Rendering, quindi seleziona e deseleziona Emula una pagina con lo stato attivo.

   

Puoi trovare la stessa opzione anche sotto il pulsante :hov della barra delle azioni in Elementi > Stili.

Disattiva i caratteri locali

Verifica se le alternative per i caratteri locali funzionano come previsto disabilitando le origini local() nelle regole @font-face.

Spesso, durante lo sviluppo, gli sviluppatori e i designer utilizzano due copie diverse dello stesso carattere:

• Un carattere locale per i tuoi strumenti di progettazione e
• Un carattere web per il tuo codice

Disattivando i caratteri locali è più facile:

• Esegui il debug e misura il rendimento e l'ottimizzazione del caricamento dei caratteri web
• Verifica la correttezza delle regole CSS @font-face
• Scopri le eventuali differenze tra i caratteri web e le relative versioni locali

Chrome visualizza questa frase in Courier New se lo trova sul dispositivo.

Emula local() origini mancanti nelle regole @font-face:

1. Esamina la frase qui sopra, apri Elementi > Calcolato, scorri fino in fondo e, sotto Caratteri visualizzati, scopri che Chrome ha trovato Courier New nei file locali.

   

2. Apri la scheda Rendering, seleziona Disattiva caratteri locali e ricarica la pagina.

3. Osserva la frase di Roboto trovata sul web.

   

Attiva la modalità Buio automatica

Scopri che aspetto può avere il tuo sito con la modalità Buio anche se non l'hai implementato.

Chrome 96 ha introdotto una prova dell'origine per il tema scuro automatico su Android. Con questa funzionalità, il browser applica un tema scuro generato automaticamente ai siti con tema chiaro se l'utente ha attivato i temi scuri nel sistema operativo.

Per attivare la modalità Buio automatica:

1. In questa pagina, apri la scheda Rendering e seleziona Abilita modalità Buio automatica.
2. Osserva questa pagina in modalità Buio.

Punto chiave: se il Tema scuro automatico è attivato, l'elenco a discesa Emula contenuti multimediali CSS prefers-color-scheme è disattivato e impostato su prefers-color-scheme: dark automaticamente.

Emula difetti alla vista

Tutti devono poter accedere al web e godertelo. Google si impegna a raggiungere questo obiettivo.

Con Chrome DevTools puoi vedere come le persone con deficit visivi vedono il tuo sito, in modo da migliorarlo per loro. Per ulteriori informazioni, consulta la sezione Simulare deficienze della visione dei colori.

Per emulare i difetti alla vista:

1. Apri la scheda Rendering.

2. In Simula deficienze visive, seleziona una delle seguenti opzioni dall'elenco a discesa:

   • Nessuna emulazione.
   • Visione sfocata.
   • Contrasto ridotto.
   • Protanopia (no rosso). Bassa percezione del rosso; confusione tra verdi, rossi e gialli.
   • Deuteranopia (no verde). Scarsa percezione del verde; confusione tra verdi, rossi e gialli.
   • Tritanopia (no blu). Bassa percezione del blu; confusione tra green e blues.
   • Acromatopsia (nessun colore). Assenza parziale o totale di visione a colori.

Disattiva i formati delle immagini AVIF e WebP

Queste emulazioni consentono agli sviluppatori di testare più facilmente diversi scenari di caricamento delle immagini senza dover cambiare browser.

Supponi di avere il seguente codice HTML per pubblicare un'immagine nei formati AVIF e WebP per i browser più recenti, con un'immagine PNG di riserva per i browser meno recenti.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Per disattivare tutte le immagini AVIF in una pagina (o, in modo simile, le immagini WebP):

1. Apri la scheda Rendering, seleziona Disattiva il formato immagine AVIF.
2. Ricarica la pagina e passa il mouse sopra il img src. L'attuale immagine src (currentSrc) è ora l'immagine WebP di riserva.

Analogamente, puoi disattivare le immagini WebP.

Punto chiave: queste opzioni disattivano automaticamente la memorizzazione nella cache delle immagini.