Inspect and debug CSS container queries

Sofia Emelianova

Jecelyn Yeen

This guide shows you how to inspect and debug CSS container queries in the Elements panel in Chrome DevTools.

CSS container queries allow you to manipulate the element's styles based on its parent container properties. This capability shifts the concept of responsive web design from page-based to container-based.

The screenshots in this guide are taken from this demo page.

Discover containers and their descendants

Every element defined as a query container has a container badge next to it in the Elements panel. The badge toggles a dotted-line overlay of the container and its descendants.

To toggle the overlay:

1. Open DevTools.
2. In the Elements panel, click the container badge next to the element defined as a container.

In this example, the container-type: inline-size property defines the container element. The descendants can query its inline dimension (horizontal axis) and change their styles based on the width of the container.

Inspect container queries

The Elements panel shows @container query declarations when they are applied to a descendant element, that is, when the container fulfills the query's condition.

To understand when you can inspect @container declarations on this demo page, examine the following code sample:

@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;
  }

In this example, if the container's width exceeds the following number of pixels, the corresponding styles apply:

• More than 400px: the paragraph (p) element appears on the page as a block—starts on a new line and takes up the whole width.
• More than 600px: descendants adopt a horizontal grid layout with the title (h1) on the top, and image (img) on the left.

To inspect the first @container declaration:

1. In the Elements panel, set the container's width to 500px. The p element appears.

2. Select the p element. In the Styles pane, you can see the @container declaration along with a link to the parent container article.card.

   

3. Set the width to more than 600px, then select any of the affected elements. Observe @container declarations that implement a horizontal layout.

   

Find container elements

To find and select a container element that caused the query to take effect, hover over and click the element name above the @container declaration.

When hovered over, the name turns into a link to the element in the Elements panel and the Styles pane displays the queried property and its current value.

Modify container queries

To debug a query, you can modify it as any other CSS declaration in the Styles pane as described in View and change CSS.

In this example, the container's width is 500px. The paragraph (p) element appears on the page.

1. Select the p element. In the Styles pane. You can see the @container (inline-size > 400px) declaration.
2. Change the inline-size from 400px to 520px.
3. The paragraph (p) element disappears from the page because it did not fulfill the query criteria.