Sugerencias para Herramientas para desarrolladores: Cómo inspeccionar consultas de contenedores CSS

Sofía Emelianova
Sofía Emelianova

Las consultas de contenedores de CSS son la nueva función de CSS que entusiasman a los desarrolladores web. Puede provocar una revolución en el diseño web, desde el diseño responsivo basado en páginas hasta el diseño responsivo basado en contenedores.

Las herramientas para desarrolladores de Chrome están aquí para ayudarte a adoptar nuevos patrones de diseño y mantenerte al tanto de las últimas tendencias. Con la compatibilidad de esta función de CSS, ahora puedes inspeccionar y depurar tus consultas de contenedores en Herramientas para desarrolladores.

El video anterior te brinda una descripción general de las consultas de contenedores, su sintaxis y cómo inspeccionarlas en Herramientas para desarrolladores.

Ahora puedes descubrir elementos de contenedor y sus descendientes con la insignia correspondiente que activa o desactiva una superposición de líneas punteadas.

Insignia de contenedor.

Inspecciona las reglas @container aplicadas a elementos subordinados cuando los contenedores satisfagan las condiciones de la consulta.

@container.

Para obtener más información sobre la compatibilidad de consultas de contenedores en Herramientas para desarrolladores, consulta Inspecciona y depura consultas de contenedores de CSS.