As consultas de contêiner do CSS são o novo recurso do CSS que os desenvolvedores da Web estão adorando. Isso pode desencadear uma revolução no design da Web, de um design responsivo baseado em páginas para um design responsivo baseado em contêineres.
O Chrome DevTools ajuda você a adotar novos padrões de design de layout e ficar por dentro das últimas tendências. Com o suporte a esse recurso do CSS, agora é possível inspecionar e depurar as consultas de contêiner no DevTools.
O vídeo acima oferece uma visão geral das consultas de contêineres, a sintaxe delas e como inspecionar essas consultas no DevTools.
Agora é possível 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 a consultas de contêiner no DevTools, consulte Inspecionar e depurar consultas de contêiner do CSS.