Debug CSS container queries

This page demonstrates how to use DevTools to inspect CSS container queries.

Not a container

The <div> element with the black border below is not a CSS container. It does not use the container-type or container-name CSS properties. The card element in it uses its default styles: a red background.

Name-only container

The <div> element with the black border below is a CSS container which uses the container-name: named-container-a; CSS property. The card element in it uses a @container query to change its background to green when it is inside a container named named-container-a.

To inspect the name-only container query in DevTools:

  1. Right-click the card element below and choose Inspect to open the Elements tool and select the card element in it.
  2. In the Styles pane, the @container query is displayed, showing the CSS rule that's applying the green background, and a link to the container element is displayed: →named-container-a.
  3. Click the link to select the container in the Elements tool.

Inline size container

The <div> element with the black border below is a CSS container of type inline-size because it uses the container-type: inline-size; CSS property. The card element in it uses a @container query to change its background to different colors depending on the size of its container. Resize the container by using the handle in the bottom-right corner of the container, and observe the card's background change.

To inspect the inline-size container query in DevTools:

  1. Right-click the card element below and choose Inspect to open the Elements tool and select the card element in it.
  2. In the Styles pane, the @container query is displayed, showing the CSS rule that's applying the green background, and a link to the container element is displayed: →div#inline-size-container.
  3. Click the link to select the container in the Elements tool.
  4. In the DOM tree, the element with ID inline-size-container is selected, and an inline-size badge is displayed next to it.
  5. Click the inline-size badge: a dashed border is drawn around the content area of the container. A dashed border is also drawn around all children elements which use the container's inline-size to apply different styles. In this case, that's the card element.

Style container

The <div> element with the black border below is a CSS container which uses the container-name: named-container-b; CSS property. The card element in it uses a @container style() query to change its background to different colors depending on the value of its container's --foo custom property. The container changes the value of --foo over time by using a CSS animation. Observe the card's background change.

To inspect the style container query in DevTools:

  1. Right-click the card element below and choose Inspect to open the Elements tool and select the card element in it.
  2. In the Styles pane, the @container style() query is displayed, showing the CSS rule that's applying the current background color.