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

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

Evidenzia frame degli annunci

Per controllare se i frame sono contrassegnati come annunci:

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

Emula una pagina con lo stato attivo

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

Per emulare una pagina con lo stato attivo:

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

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

   

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

Disattiva caratteri locali

Controlla se le alternative dei caratteri locali funzionano come previsto disattivando le origini local() nelle regole @font-face.

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

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

La disattivazione dei caratteri locali ti consente di:

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

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

1. Ispeziona la frase precedente, apri Elementi > Calcolati, scorri fino in fondo e, nella sezione Caratteri sottoposti a rendering, scopri che Chrome ha trovato Courier New nei file locali.

   

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

3. Osserva la frase di Roboto che si trova sul web.

   

Attiva modalità Buio automatica

Scopri che aspetto ha il tuo sito in modalità Buio anche se non l'hai implementato.

In Chrome 96 è stata introdotta la 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.

Emula carenze visive

Il web deve essere accessibile a tutti e Google si impegna affinché questo diventi realtà.

Con Chrome DevTools puoi vedere in che modo le persone con carenze di vista vedono il tuo sito, in modo da migliorarlo. Per saperne di più, consulta Simulare carenze della visione dei colori.

Per emulare le carenze visive:

1. Apri la scheda Rendering.

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

   • Nessuna emulazione.
   • Visione sfocata.
   • Contrasto ridotto.
   • Protanopia (no rosso). Bassa percezione del rosso; confusione relativa a verdi, rossi e gialli.
   • Deuteranopia (no verde). Bassa percezione del verde; confusione relativa a verdi, rossi e gialli.
   • Tritanopia (no blu). Bassa percezione del blu; confusione tra verdi e blu.
   • Acromatopsia (nessun colore). Assenza parziale o totale della visione dei 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, analogamente, le immagini WebP):

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

Analogamente, puoi disattivare le immagini WebP.