Inspecciona y depura consultas de contenedores CSS

Sofia Emelianova

Jecelyn Yeen

En esta guía, se muestra cómo inspeccionar y depurar consultas de contenedores de CSS en el panel Elements de las Herramientas para desarrolladores de Chrome.

Las consultas de contenedor de CSS te permiten manipular los estilos del elemento según las propiedades del 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 tomaron de esta página de demostración.

Descubre contenedores y sus elementos subordinados

Cada elemento definido como un contenedor de consultas tiene una insignia container junto a él 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. Abre Herramientas para desarrolladores.
2. En el panel Elementos, 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 en función del ancho del contenedor.

Inspeccionar las consultas de contenedores

El panel Elements muestra las declaraciones de consulta @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) en la izquierda.

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

1. En el panel Elementos, 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 de @container que implementen un diseño horizontal.

   

Busca elementos de contenedor

Para buscar y seleccionar un elemento de contenedor que activó la consulta, coloca el cursor sobre el nombre del elemento que se encuentra arriba de la declaración @container y haz clic en él.

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

Modificar consultas de contenedores

Para depurar una consulta, puedes modificarla como cualquier otra declaración de CSS en el panel Estilos, tal como se describe en Cómo ver y cambiar el 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, sigue estos pasos: Puedes ver la declaración @container (inline-size > 400px).
2. Cambia el inline-size de 400px a 520px.
3. El elemento de párrafo (p) desaparece de la página porque no cumplía con los criterios de búsqueda.