How to Inspect and Debug CSS Container Queries in Safari Web Inspector

While traditional CSS media queries adapt page typography and layout based on the global viewport dimensions of the device, modern component-based design systems demand modularity where components adapt dynamically to the width and dimensions of their direct parent containers. CSS Container Queries (using container-type, container-name, and @container rules) allow cards, navigation hubs, and media widgets to reconfigure themselves whether placed in a narrow sidebar or a full-width header band. Safari Web Inspector includes dedicated visual debugging tools to inspect container contexts, trace query inheritance, and debug breakpoint matching.

In this guide, you will learn how to inspect container query badges in the DOM tree, trace evaluated @container rules in the Styles sidebar, and test dynamic resizing in Safari Web Inspector on macOS.

Understanding CSS Container Queries and Container Types

To establish a container context, an ancestor element must declare a container-type property:

• container-type: inline-size;: Establishes a query container evaluated against the inline axis (width in horizontal writing modes). This is the most common container type, allowing descendants to query available width while letting height grow naturally.
• container-type: size;: Establishes a query container evaluated against both inline and block dimensions (width and height). Requires explicit height definition.
• container-type: normal;: Default element behaviour that acts as a container only for container style queries, not dimensional size queries.
• container-name: <name>;: Assigns a named identifier to the container, enabling descendant rules (such as @container <name> (min-width: 400px)) to target specific ancestor containers rather than the nearest default container.

Safari Web Inspector identifies these containers visually directly within the DOM hierarchy.

Enabling Developer Features and Inspecting the DOM Tree

To inspect container queries in Safari, ensure developer features are active:

1. Open Safari on macOS.
2. Navigate to Safari > Settings > Advanced.
3. Ensure Show features for web developers is checked.
4. Open the webpage containing your container query components.
5. Right-click the component and select Inspect Element (or press Option + Cmd + I).

In the Elements tab DOM hierarchy, look closely at elements declaring container-type or container shorthand properties. Safari displays an interactive pill badge labelled container adjacent to the element’s opening HTML tag.

Using Container Badges and Highlighting Ancestors

The container badge provides instantaneous contextual awareness of component nesting:

1. Hover your cursor over the container badge in the DOM tree. Safari instantly renders a dashed highlight overlay around the parent container on the live webpage, illustrating its bounding box and margins.
2. Click the container badge directly. Safari toggles persistent visual highlighting, allowing you to scroll or interact with the page while viewing container boundaries.
3. When inspecting a child element inside the container, check the Styles panel on the right sidebar. Safari lists an interactive ancestor shortcut button indicating which container currently bounds that child’s @container rules.

Debugging @container Rule Matching in the Styles Sidebar

When you select an element governed by container queries, the Styles panel organizes CSS rules by origin and media type:

1. Scroll through the matched rules in the Styles tab.
2. Look for the rule header beginning with @container (for example, @container (min-width: 500px) or @container sidebar (min-width: 320px)).
3. Safari indicates whether the condition is currently Active or Inactive:
   • Active Match: The CSS declarations within the block appear in bold text, indicating that the container’s current inline width satisfies the condition.
   • Inactive Match: If the container width is below the threshold, the entire rule block is dimmed or struck through, with a warning indicating that the container constraint is not currently met.
4. Hover over the container name or query declaration. A tooltip appears displaying the container’s calculated live inline-size (e.g., Current inline-size: 468px), allowing you to see exactly how many pixels you are away from the next layout breakpoint.

Testing Container Queries with Live Element Resizing

Unlike media queries that require resizing the entire browser window or using Responsive Design Mode, container queries must be tested by altering the container’s specific layout box.

You can test responsive adaptations directly inside Web Inspector without editing production CSS files:

1. In the DOM tree, select the container element holding the container-type property.
2. In the Styles panel, click inside the element’s rule block or add a temporary inline style under element.style:

   width: 350px;

3. Click the width numerical value and use your keyboard’s Up Arrow and Down Arrow keys to dynamically scrub the width across breakpoint thresholds.
4. Observe the child component in real time. As the width crosses 400px or 600px, watch child elements smoothly transition from single-column vertical cards to horizontal multi-column layouts as @container rules activate.

Troubleshooting Common Container Query Pitfalls in Safari

If container queries fail to apply or trigger infinite layout loops, check the following common issues:

• Missing container-type: If an @container rule never matches despite having adequate width, ensure the parent has an explicit container-type: inline-size or container-type: size declaration. A standard div without this property cannot serve as a query context.
• Layout Recursion (Circular Sizing): If child elements inside a container query attempt to dictate the size of the container itself (e.g., unconstrained auto width on the container), Safari may disable the container evaluation to prevent infinite feedback loops. Ensure the container has an established sizing mechanism (such as grid column tracks or flex basis).
• Named Container Mismatches: If your query states @container card-box (min-width: 400px), ensure the ancestor declares container-name: card-box. If the names do not match case-sensitively, Safari skips that ancestor and searches upward for the nearest unnamed container.