Questa guida spiega come esaminare ed eseguire il debug delle query sui contenitori CSS nel riquadro Elements di Chrome DevTools.
Le query del contenitore CSS ti consentono di modificare gli stili dell'elemento in base alle proprietà del contenitore principale. Questa funzionalità sposta il concetto di web design reattivo da quello basato sulle pagine a quello basato su container.
Gli screenshot di questa guida sono tratti da questa pagina demo.
Scopri i container e i loro discendenti
A ogni elemento definito come contenitore di query è presente un badge container
, nel riquadro Elements. Il badge attiva/disattiva la sovrapposizione di una linea tratteggiata del container e dei relativi discendenti.
Per attivare/disattivare l'overlay:
- Apri DevTools.
- Nel riquadro Elements, fai clic sul badge
container
accanto all'elemento definito come contenitore.
In questo esempio, la proprietà container-type: inline-size
definisce l'elemento contenitore. I discendenti possono eseguire query sulla propria dimensione in linea (asse orizzontale) e modificare i propri stili in base alla larghezza del contenitore.
Ispeziona le query container
Il riquadro Elements mostra le dichiarazioni di query @container
quando vengono applicate a un elemento discendente, ovvero quando il contenitore soddisfa la condizione della query.
Per capire quando puoi esaminare le dichiarazioni @container
in questa pagina demo, esamina il seguente esempio di codice:
@container (inline-size > 400px) {
.coffee p {
display: block;
}
}
@container (inline-size > 600px) {
.coffee {
display: grid;
grid-template-columns: 280px auto;
}
.coffee h1 {
grid-column: 1/3;
}
.coffee img {
grid-row: 2/4;
}
In questo esempio, se la larghezza del contenitore supera il seguente numero di pixel, vengono applicati gli stili corrispondenti:
- Più di
400px
: l'elemento paragrafo (p
) viene visualizzato sulla pagina come un blocco, inizia su una nuova riga e occupa l'intera larghezza. - Più di
600px
: i discendenti adottano un layout a griglia orizzontale con il titolo (h1
) in alto e l'immagine (img
) a sinistra.
Per esaminare la prima dichiarazione @container
:
- Nel riquadro Elements, imposta la larghezza del contenitore su
500px
. Viene visualizzato l'elementop
. Seleziona l'elemento
p
. Nel riquadro Stili, puoi visualizzare la dichiarazione@container
e un link al contenitore principalearticle.card
.Imposta la larghezza su un valore superiore a
600px
, quindi seleziona uno degli elementi interessati. Osserva le dichiarazioni@container
che implementano un layout orizzontale.
Trovare gli elementi del contenitore
Per trovare e selezionare un elemento contenitore che ha attivato l'applicazione della query, passa il mouse sopra la dichiarazione e fai clic sul nome dell'elemento sopra la dichiarazione @container
.
Quando passi il mouse sopra, il nome si trasforma in un link all'elemento nel riquadro Elements e nel riquadro Elements vengono visualizzati la proprietà oggetto della query e il relativo valore corrente.
Modifica query container
Per eseguire il debug di una query, puoi modificarla come qualsiasi altra dichiarazione CSS nel riquadro Stili, come descritto in Visualizzare e modificare CSS.
In questo esempio, la larghezza del container è 500px
. L'elemento paragrafo (p
) viene visualizzato nella pagina.
- Seleziona l'elemento
p
. Nel riquadro Stili. Puoi visualizzare la dichiarazione@container (inline-size > 400px)
. - Modifica
inline-size
da400px
a520px
. - L'elemento paragrafo (
p
) scompare dalla pagina perché non soddisfaceva i criteri della query.