Las consultas de contenedor de CSS son la nueva función de CSS que entusiasma a los desarrolladores web. Puede desencadenar una revolución en el diseño web, del diseño responsivo basado en páginas al diseño responsivo basado en contenedores.
Las Herramientas para desarrolladores de Chrome están aquí para ayudarte a adoptar nuevos patrones de diseño de diseño y mantenerte al tanto de las tendencias más recientes. Con la compatibilidad de esta función de CSS, ahora puedes inspeccionar y depurar tus consultas de contenedor en DevTools.
En el video anterior, se proporciona una descripción general de las consultas de contenedores, su sintaxis y cómo inspeccionarlas en DevTools.
Ahora puedes descubrir los elementos del contenedor y sus elementos secundarios con la insignia correspondiente que activa o desactiva una superposición de líneas punteadas.
Inspecciona las reglas @container aplicadas a los elementos secundarios cuando los contenedores satisfacen las condiciones de consulta.
Para obtener más información sobre la compatibilidad con las consultas de contenedores en DevTools, consulta Inspecciona y depura las consultas de contenedores de CSS.