Suggerimenti per DevTools: come esaminare le query dei contenitori CSS

Sofia Emelianova

Le query dei contenitori CSS sono la nuova funzionalità CSS che entusiasma gli sviluppatori web. Potrebbe scatenare una rivoluzione nel web design, dal responsive design basato su pagine al responsive design basato su contenitori.

Chrome DevTools è qui per aiutarti ad adottare nuovi pattern di design del layout e a rimanere al passo con le ultime tendenze. Con il supporto di questa funzionalità CSS, ora puoi ispezionare e eseguire il debug delle query del contenitore in DevTools.

Il video qui sopra fornisce una panoramica delle query dei contenitori, della loro sintassi e di come ispezzionarle in DevTools.

Ora puoi trovare gli elementi contenitore e i relativi discendenti con il badge corrispondente che attiva e disattiva un overlay a linee tratteggiate.

Controlla le regole @container applicate ai discendenti quando i contenitori soddisfano le condizioni di query.

Per scoprire di più sul supporto delle query dei contenitori in DevTools, consulta Esaminare e eseguire il debug delle query dei contenitori CSS.