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 pagina con questo riferimento alle opzioni della scheda Rendering.

Evidenzia frame dell'annuncio

Per verificare se i frame sono contrassegnati 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.

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 nel pulsante :hov nella barra delle azioni in Elementi > Stili.

Per scoprire altri modi per bloccare un elemento, consulta la sezione Bloccare lo schermo e ispezionare gli elementi scomparsi.

Disattivare i caratteri locali

Verifica se le alternative ai 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 e
• Un carattere web per il tuo codice

La disattivazione dei caratteri locali ti consente di:

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

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

1. Esamina la frase sopra, apri Elementi > Calcolato, scorri fino in fondo e, in Caratteri visualizzati, 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 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 Attiva modalità Buio automatica.
2. Osserva questa pagina in modalità Buio.

Emula carenze visive

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 saperne di più, consulta la sezione Simulare carenze di visione dei colori.

Per emulare 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 (nessun rosso). Bassa percezione del rosso; confusione tra verdi, rossi e gialli.
   • Deuteranopia (no verde). Bassa percezione del verde; confusione tra verde, rosso e giallo.
   • Tritanopia (no blu). Bassa percezione del blu; confusione tra i colori verde e blu.
   • Acromatopsia (nessun colore). Assenza parziale o totale della visione dei colori.

Disattivare i formati di immagine AVIF e WebP

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

Supponiamo 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 Disabilita formato immagine AVIF.
2. refresh Ricarica la pagina e passa il mouse sopraimg src. L'attributo src dell'immagine attuale (currentSrc) ora è l'immagine WebP di riserva.

Analogamente, puoi disattivare le immagini WebP.