Esaminare ed eseguire il debug delle query dei contenitori CSS

Sofia Emelianova

Jecelyn Yeen

Questa guida spiega come esaminare ed eseguire il debug delle query sui contenitori CSS nel riquadro Elementi 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 Elementi. Il badge attiva/disattiva la sovrapposizione di una linea tratteggiata del container e dei relativi discendenti.

Per attivare/disattivare l'overlay:

1. Apri DevTools.
2. Nel riquadro Elementi, 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 Elementi 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:

1. Nel riquadro Elementi, imposta la larghezza del contenitore su 500px. Viene visualizzato l'elemento p.

2. Seleziona l'elemento p. Nel riquadro Stili, puoi visualizzare la dichiarazione @container e un link al contenitore principale article.card.

   

3. 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 Elementi e nel riquadro Stili 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.

1. Seleziona l'elemento p. Nel riquadro Stili. Puoi visualizzare la dichiarazione @container (inline-size > 400px).
2. Modifica inline-size da 400px a 520px.
3. L'elemento paragrafo (p) scompare dalla pagina perché non soddisfaceva i criteri della query.