Esaminare ed eseguire il debug delle query dei contenitori CSS

Sofia Emelianova

Jecelyn Yeen

Questa guida mostra come ispezionare e eseguire il debug delle query dei contenitori CSS nel riquadro Elementi di Chrome DevTools.

Le query dei contenitori 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 un approccio basato sulle pagine a uno basato sui container.

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

Scoprire i contenitori e i relativi 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 relativa dimensione in linea (asse orizzontale) e modificare i relativi stili in base alla larghezza del contenitore.

Controlla le query dei 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 ispezionare le dichiarazioni @container in questa pagina di 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 ispezionare 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 vedere la dichiarazione @container insieme a 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.

Se passi il mouse sopra il nome, questo diventa un link all'elemento nel riquadro Elementi e il riquadro Stili mostra la proprietà su cui è stata eseguita la 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 il 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 vedere 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.