Esaminare ed eseguire il debug delle query dei contenitori CSS

Sofia Emelianova

GitHub

Jecelyn Yeen

Twitter GitHub Homepage

Questa guida mostra come ispezionare le query dei contenitori CSS ed eseguirne il debug nel riquadro Elementi di Chrome DevTools.

Le query del contenitore CSS ti consentono di manipolare gli stili dell'elemento in base alle proprietà del contenitore principale. Questa funzionalità sposta il concetto di responsive web design da "basato su pagine" a basato su container.

Gli screenshot in questa guida sono tratti da questa pagina demo.

Scopri i container e i relativi discendenti

A ogni elemento definito come contenitore della query è associato un badge container nel riquadro Elementi. Il badge alterna un overlay con linee tratteggiate del contenitore e dei suoi 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 sua dimensione in linea (asse orizzontale) e modificare i propri stili in base alla larghezza del contenitore.

Ispeziona le query sui container

Il riquadro Elementi mostra @container dichiarazioni delle query quando queste vengono applicate a un elemento discendente, ossia 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 nella pagina sotto forma di 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, poi 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 la query, passa il mouse sopra la dichiarazione @container e fai clic sul relativo nome.

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.

Modificare le 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 contenitore è 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 soddisfa i criteri di query.