As consultas de contêiner CSS são o novo recurso CSS que os desenvolvedores Web adoram. Isso pode causar uma revolução no web design, do design responsivo baseado em página ao design responsivo baseado em contêiner.
O Chrome DevTools está aqui para ajudar você a adotar novos padrões de design de layout e ficar por dentro das últimas tendências. Com esse recurso do CSS, é possível inspecionar e depurar suas consultas de contêiner no DevTools.
O vídeo acima apresenta uma visão geral das consultas de contêiner, da sintaxe delas e de como inspecioná-las no DevTools.
Agora você pode descobrir elementos de contêiner e seus descendentes com o selo correspondente que alterna uma sobreposição de linha pontilhada.
Inspecione as regras @container aplicadas aos descendentes quando os contêineres atendem às condições da consulta.
Para saber mais sobre o suporte às consultas de contêiner no DevTools, consulte Inspecionar e depurar consultas de contêiner CSS.