Inspecciona y depura consultas de contenedores CSS

Esta guía muestra cómo inspeccionar y depurar las consultas del contenedor CSS en el panel Elements, en las Herramientas para desarrolladores de Chrome.

Las consultas de contenedor CSS te permiten manipular los estilos del elemento según sus propiedades de contenedor superior. Esta función cambia el concepto de diseño web responsivo de basado en páginas a basado en contenedores.

Las capturas de pantalla de esta guía se toman de esta página de demostración.

Descubre contenedores y sus descendientes

Todos los elementos definidos como contenedores de consultas tienen la insignia container junto a ellos en el panel Elements. La insignia activa o desactiva una superposición de líneas de puntos del contenedor y sus elementos subordinados.

Para activar o desactivar la superposición, haz lo siguiente:

1. Abra Herramientas para desarrolladores.
2. En el panel Elements, haz clic en la insignia container junto al elemento definido como contenedor.

En este ejemplo, la propiedad container-type: inline-size define el elemento contenedor. Los elementos subordinados pueden consultar su dimensión intercalada (eje horizontal) y cambiar sus estilos según el ancho del contenedor.

Inspecciona consultas de contenedores

En el panel Elements, se muestran las declaraciones de consulta de @container cuando se aplican a un elemento subordinado, es decir, cuando el contenedor cumple la condición de la consulta.

Para comprender cuándo puedes inspeccionar declaraciones @container en esta página de demostración, examina la siguiente muestra de código:

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

En este ejemplo, si el ancho del contenedor supera la siguiente cantidad de píxeles, se aplican los estilos correspondientes:

• Más de 400px: El elemento de párrafo (p) aparece en la página como un bloque; comienza en una línea nueva y ocupa todo el ancho.
• Más de 600px: los elementos subordinados adoptan un diseño de cuadrícula horizontal con el título (h1) en la parte superior y la imagen (img) a la izquierda.

Para inspeccionar la primera declaración @container, haz lo siguiente:

1. En el panel Elements, establece el ancho del contenedor en 500px. Aparecerá el elemento p.

2. Selecciona el elemento p. En el panel Estilos, puedes ver la declaración @container junto con un vínculo al contenedor superior article.card.

   

3. Establece el ancho en más de 600px y, luego, selecciona cualquiera de los elementos afectados. Observa las declaraciones @container que implementan un diseño horizontal.

   

Cómo buscar elementos contenedores

Para buscar y seleccionar un elemento contenedor que provocó que se aplicara la consulta, coloca el cursor y haz clic en el nombre del elemento que aparece arriba de la declaración @container.

Cuando se coloca el cursor sobre, el nombre se convierte en un vínculo al elemento en el panel Elements, y el panel Styles muestra la propiedad consultada y su valor actual.

Modifica consultas de contenedores

Para depurar una consulta, puedes modificarla como cualquier otra declaración de CSS en el panel Styles, como se describe en Cómo ver y cambiar CSS.

En este ejemplo, el ancho del contenedor es 500px. El elemento de párrafo (p) aparece en la página.

1. Selecciona el elemento p. En el panel Estilos (Styles). Puedes ver la declaración @container (inline-size > 400px).
2. Cambia inline-size de 400px a 520px.
3. El elemento de párrafo (p) desaparece de la página porque no cumplió con los criterios de búsqueda.