Informazioni sui badge

Sofia Emelianova
Sofia Emelianova
GitHub

Attiva/disattiva varie sovrapposizioni e velocizza la navigazione nell'albero DOM con questo riferimento completo dei badge nel riquadro Elementi.

Mostrare o nascondere i badge

Per mostrare o nascondere determinati badge:

  1. Apri DevTools.
  2. Fai clic con il tasto destro del mouse su un elemento nell'albero DOM e seleziona uno o più badge nel sottomenu Impostazioni badge.

Il menu "Impostazioni badge".

Il riquadro Elementi mostra i badge selezionati accanto agli elementi appropriati nell'albero DOM. Le sezioni seguenti spiegano ogni badge.

Visualizza origine

Il badge view-source si trova accanto al tag <html> nella radice della pagina HTML. Fai clic per visualizzare l'origine della pagina nel riquadro Origini.

Il badge &quot;Visualizza origine&quot;.

Questo badge fornisce un flusso di lavoro alternativo all'opzione Visualizza sorgente pagina nel menu contestuale (tasto destro del mouse) della pagina di Chrome:

  1. In Chrome, fai clic con il tasto destro del mouse > Ispeziona una pagina.
  2. Nel riquadro Elementi, fai clic sul badge view-source accanto al tag <html>.
  3. Esamina il codice sorgente della pagina nel riquadro Fonti.

Griglia

Un elemento HTML è un container della griglia se la sua proprietà CSS display è impostata su grid o inline-grid. Questi elementi hanno badge grid accanto che attivano/disattivano le overlay corrispondenti.

Attiva/disattiva l'overlay nell'anteprima seguente:

  1. Ispeziona l'elemento nell'anteprima.
  2. Nell'albero DOM, fai clic sul badge grid accanto all'elemento e osserva l'overlay.

Overlay della griglia.

La sovrapposizione mostra colonne, righe, i relativi numeri e gli spazi vuoti.

Per scoprire come eseguire il debug del layout a griglia, consulta Ispeziona la griglia CSS.

Griglia secondaria

Una sottogriglia è una griglia nidificata che utilizza le stesse tracce della griglia principale. Un elemento è un contenitore di sottogriglia se una o entrambe le proprietà grid-template-columns e grid-template-rows sono impostate su subgrid. Questi elementi hanno badge subgrid accanto che attivano/disattivano le overlay corrispondenti.

Attiva/disattiva l'overlay nell'anteprima seguente:

  1. Ispeziona l'elemento nell'anteprima.
  2. Nell'albero DOM, fai clic sul badge subgrid accanto all'elemento e osserva l'overlay.

Overlay della sottogriglia.

La sovrapposizione mostra colonne, righe, i relativi numeri e gli spazi vuoti di una griglia secondaria.

Flex

Un elemento HTML è un flex container se la relativa proprietà CSS display è impostata su flex o inline-flex. Questi elementi hanno badge flex accanto che attivano/disattivano le overlay corrispondenti.

Attiva/disattiva l'overlay nell'anteprima seguente:

  1. Ispeziona l'elemento nell'anteprima.
  2. Nell'albero DOM, fai clic sul badge flex accanto all'elemento e osserva l'overlay.

Overlay flessibile.

La sovrapposizione mostra le posizioni degli elementi secondari.

Per scoprire come eseguire il debug dei layout flessibili, consulta Ispezionare ed eseguire il debug di CSS Flexbox.

DevTools può rilevare alcuni frame degli annunci e taggarli. Questi frame hanno i badge ad accanto.

Scopri un annuncio nella seguente anteprima:

  1. Ispeziona l'elemento nell'anteprima.
  2. Nell'albero DOM, trova un elemento con il badge ad accanto.

Badge annuncio.

Il badge ad non è selezionabile, ma puoi utilizzare la scheda Rendering per evidenziare i frame degli annunci in rosso.

Scorri

Un elemento HTML è un contenitore di scorrimento se la relativa proprietà CSS overflow è impostata su scroll o auto quando i contenuti sono sufficienti a causare l'overflow. Questi elementi sono contrassegnati da badge scroll.

Badge di scorrimento su un nodo dell&#39;albero DOM.

Scroll-snap

I contenitori di scorrimento possono avere proprietà CSS che configurano i punti di snap. Questi elementi hanno badge scroll-snap accanto che attivano/disattivano le overlay corrispondenti.

Attiva/disattiva l'overlay nell'anteprima seguente:

  1. Ispeziona l'elemento nell'anteprima.
  2. Nell'albero DOM, fai clic sul badge scroll-snap accanto all'elemento.
  3. Prova a scorrere l'elemento verso destra e osserva l'overlay.

Overlay scroll-snap.

L'overlay mostra le posizioni degli elementi e i punti di snap.

Container

Un elemento HTML è un contenitore se ha la proprietà CSS container-type. Questi elementi hanno badge container accanto che attivano/disattivano le overlay corrispondenti.

Attiva/disattiva l'overlay nell'anteprima seguente:

  1. Ispeziona l'elemento nell'anteprima.
  2. Nell'albero DOM, fai clic sul badge container accanto all'elemento.
  3. Prova a ridimensionare l'elemento trascinando l'angolo in basso a destra e osserva la modifica del layout e della sovrapposizione.

Overlay del contenitore.

La sovrapposizione mostra le posizioni degli elementi secondari.

Per scoprire come eseguire il debug delle query dei contenitori, consulta Ispezionare ed eseguire il debug delle query dei contenitori CSS.

Slot

L'elemento HTML <slot> è un segnaposto che puoi riempire con i tuoi contenuti. Insieme all'elemento <template>, <slot> ti consente di creare alberi DOM separati e presentarli insieme. Gli elementi dei contenuti degli slot hanno i badge slot accanto, che fungono da link agli slot corrispondenti.

Scopri il badge slot nella seguente anteprima:

  1. Ispeziona l'elemento nell'anteprima.
  2. Nell'albero DOM, fai clic sul badge slot accanto all'elemento per individuare lo slot corrispondente. Inserisci e scopri i badge.
  3. Torna ai contenuti dello slot facendo clic sul badge reveal.

Top-layer

Questo badge ti aiuta a comprendere il concetto di livello superiore e a visualizzarlo. Il livello superiore esegue il rendering dei contenuti sopra tutti gli altri livelli, indipendentemente da z-index. Quando apri un elemento <dialog> utilizzando il metodo .showModal(), il browser lo inserisce nel livello superiore.

Per aiutarti a visualizzare gli elementi del livello superiore, il riquadro Elementi aggiunge un contenitore #top-layer all'albero DOM dopo il tag di chiusura </html>.

Gli elementi del livello superiore hanno i badge top-layer (N) accanto, dove N è il numero di indice dell'elemento. I badge sono link agli elementi corrispondenti nel contenitore #top-layer.

Scopri il badge top-layer (N) nella seguente anteprima:

  1. Nell'anteprima, fai clic su Apri finestra di dialogo.
  2. Controlla la finestra di dialogo.
  3. Nell'albero DOM, fai clic sul badge top-layer (1) accanto all'elemento <dialog>. Il pannello Elementi ti porta all'elemento corrispondente nel contenitore #top-layer dopo il tag di chiusura </html>. Il contenitore e il badge del livello superiore.
  4. Torna all'elemento <dialog> facendo clic sul badge reveal accanto all'elemento o al relativo ::backdrop.

Media

Il badge media è disattivato per impostazione predefinita. Quando è attiva, viene visualizzata accanto agli elementi <audio> e <video>. Fai clic su questo badge per aprire il riquadro Media e eseguire il debug dei tuoi contenuti multimediali.

Il badge dei contenuti multimediali attivato nelle impostazioni dei badge e visualizzato accanto all&#39;elemento video.

Per saperne di più, consulta Eseguire il debug dei lettori multimediali con il pannello Media.

Popover

Un popover è un elemento con un attributo popover ed è utile per un'ampia gamma di pattern interattivi, tra cui descrizioni comando, avvisi, toast e altro ancora. Questi elementi hanno i badge popover accanto.

Questo badge attiva/disattiva un badge top-layer accanto, che rimanda agli elementi corrispondenti nel contenitore #top-layer.

Scopri il badge popover nella seguente anteprima:

  1. Nell'anteprima, fai clic su ATTIVA/DISATTIVA POPUP.
  2. Ispeziona il popup visualizzato.

  3. Nell'albero DOM, fai clic sul badge popover accanto all'elemento <div popover>. Nel riquadro Elementi viene visualizzato il badge top-layer.

    Il badge del popover accanto all&#39;elemento con un attributo popover.

  4. Segui i passaggi descritti nella sezione `Livello superiore`.

Per saperne di più, vedi anche https://web.dev/learn/css/popover-and-dialog.

Starting-style

La regola @starting-style definisce gli stili iniziali di un elemento prima che venga visualizzato nella pagina. Questo è necessario per gli elementi che entrano in animazione da display: none, in quanto hanno bisogno di uno stato da cui entrare in animazione. Questi elementi sono contrassegnati da badge starting-style.

Questo badge attiva/disattiva gli stili nella regola @starting-style, in modo da poter vedere l'animazione in azione.

Scopri il badge starting-style nella seguente anteprima:

  1. Nell'anteprima, fai clic su APRI POPUP.
  2. Ispeziona il popup visualizzato.

  3. Nell'albero DOM, attiva/disattiva il badge starting-style accanto all'elemento <div popover>.

    Il badge starting-style accanto all&#39;elemento con la regola @starting-style.

  4. Osserva l'animazione in azione e gli stili applicati nella scheda Elementi > Stili.

Per saperne di più, vedi anche Animare i popup.