As consultas de contêiner CSS são o novo recurso de CSS que os desenvolvedores da Web estão entusiasmados. Ele pode desencadear uma revolução no design da Web, do design responsivo baseado em página ao design responsivo baseado em contêineres.
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 o suporte a esse recurso CSS, agora você pode inspecionar e depurar suas consultas de contêiner no DevTools.
O vídeo acima dá uma visão geral das consultas de contêiner, a sintaxe delas e como inspecioná-las no DevTools.
Agora é possível descobrir elementos de contêiner e os 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 de consulta.
Para saber mais sobre o suporte a consultas de contêiner no DevTools, consulte Inspecionar e depurar consultas de contêiner CSS.