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

Sofia Emelianova
Sofia Emelianova

Las consultas de contenedores de CSS son la nueva función de CSS que entusiasman a los desarrolladores web. Esto puede desencadenar 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 te ayudarán a adoptar nuevos patrones de diseño y mantenerte al tanto de las tendencias más recientes. Gracias a la compatibilidad con esta función de CSS, ahora puedes inspeccionar y depurar las consultas de tus contenedores en Herramientas para desarrolladores.

En el video anterior, se ofrece 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 elementos subordinados con la insignia correspondiente que activa o desactiva una superposición de líneas de puntos.

Insignia del contenedor.

Inspecciona las reglas @container que se aplican a los elementos subordinados cuando los contenedores cumplen con las condiciones de consulta.

@container.

Para obtener más información sobre la compatibilidad con consultas de contenedores en Herramientas para desarrolladores, consulta Cómo inspeccionar y depurar consultas de contenedores de CSS.