Le query del contenitore CSS sono la nuova funzionalità CSS apprezzata dagli sviluppatori web. Potrebbe innescare una rivoluzione nel web design, dal responsive design basato sulle pagine al Responsive design basato su container.
Chrome DevTools ti aiuta ad adottare nuovi modelli di progettazione del layout e a rimanere al passo con le ultime tendenze. Con il supporto di questa funzionalità CSS, ora puoi esaminare le query dei container ed eseguirne il debug in DevTools.
Il video riportato sopra offre una panoramica delle query dei container, della loro sintassi e di come esaminarle in DevTools.
Ora puoi scoprire gli elementi contenitore e i relativi discendenti con il badge corrispondente che attiva/disattiva un overlay con linea tratteggiata.
Controlla le regole @container applicate ai discendenti quando i container soddisfano le condizioni delle query.
Per scoprire di più sul supporto delle query dei container in DevTools, consulta Esaminare ed eseguire il debug delle query dei container CSS.