How to Inspect and Debug Container Query Length Units in Safari Web Inspector

Responsive web typography and component scaling have long relied on viewport-relative length units such as vw and vh. While effective for full-screen hero banners, viewport units fail inside modular component architectures—such as sidebars, modal dialogues, or dynamic multi-column grids—where an element’s dimensions depend on its containing card rather than the browser window. CSS Container Query length units (cqw, cqh, cqi, cqb, cqmin, and cqmax) solve this challenge by sizing typography and margins relative to the nearest containment ancestor. Safari Web Inspector includes specialized inspection tools to trace container contexts, evaluate resolved unit values, and debug sizing anomalies.

Understanding Container Query Length Units

Container query length units represent percentage fractions of a designated query container’s dimensions:

• 1cqw = 1% of the query container’s width.
• 1cqh = 1% of the query container’s height.
• 1cqi = 1% of the query container’s inline size (width in horizontal writing modes).
• 1cqb = 1% of the query container’s block size (height in horizontal writing modes).
• 1cqmin = The smaller value of cqi or cqb.
• 1cqmax = The larger value of cqi or cqb.

For these units to resolve, an ancestor element must establish container containment using container-type: inline-size or container-type: size. If no ancestor specifies a container type, the browser falls back to treating the viewport as the reference container.

Enabling Safari Web Inspector

1. Launch Safari on macOS and open Settings (Cmd + ,).
2. Under the Advanced tab, ensure Show features for web developers is selected.
3. Right-click the responsive component on your web page and choose Inspect Element.

Identifying Container Contexts in the Elements Tree

Safari automatically labels query containers in the DOM hierarchy:

1. Open the Elements tab in Safari Web Inspector.
2. Scan the DOM tree for the container ancestor. Elements defining container-type or container-name display an interactive container badge adjacent to their element tag.
3. Click the container badge to highlight the container’s dimensional boundary directly on the viewport canvas.
4. In the Styles panel, inspect the container rule:

   .card-wrapper {
     container-type: inline-size;
     container-name: card;
   }

Inspecting Resolved cqi and cqw Values in the Styles and Computed Panes

When an element utilizes container units (e.g., font-size: clamp(1rem, 4cqi, 2.5rem);), Safari allows developers to inspect both the raw formula and the computed pixel equivalent:

1. Select the child text or element node in the DOM tree.
2. In the Styles panel, examine the declared CSS rule. Safari shows the formula alongside live inline variable badges.
3. Switch to the Computed styles panel on the right sidebar.
4. Filter for font-size or padding.
5. Examine the computed pixel value (e.g., 24px). If the parent container is 600px wide, 4cqi calculates precisely to 24px (600 × 0.04).
6. Resize the browser window or drag the sidebar divider; observe how the Computed tab updates pixel values in real time as the container boundary changes.

Debugging Container Unit Inheritance Anomalies

• Unintended Viewport Fallback: If container units appear identical across different containers, verify that container-type: inline-size is applied to the intended immediate container. Without containment, units evaluate against the document viewport.
• Looping Layout Dependencies: Attempting to size a container’s width using cqw derived from that same container causes an infinite layout recursion. CSS engines ignore container units on the container itself; units must be applied to descendant children.
• Named Container Targeting: If multiple nested containers exist, disambiguate target measurements using container queries:

  @container card (min-width: 400px) {
    .card-title {
      font-size: 5cqi;
    }
  }

Best Practice Tips for Fluid Component Design

• Combine with CSS clamp(): Always enclose container units inside clamp() (e.g., font-size: clamp(14px, 3.5cqi, 28px);) to prevent typography from collapsing on narrow mobile screens or blowing out inside wide desktop columns.
• Fluid Gaps and Margins: Use gap: 2cqi inside flexbox and grid layouts so spacing between child items scales harmoniously with card dimensions.