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

Modern component-driven web architectures demand modular styling solutions where UI widgets adapt dynamically to their environment without relying on global class names or brittle JavaScript state toggles. While standard CSS Container Queries evaluate the physical dimensions (inline size, width, or aspect ratio) of an ancestor container, the CSS Container Queries Level 3 specification introduces an equally transformative capability: Style Queries.

Style Queries allow child elements to conditionally apply CSS rules based on the computed custom properties (CSS variables) of an ancestor container using @container style(--custom-property: value) syntax. Instead of writing verbose modifier classes (such as .card--dark, .card--compact, or .card--elevated), components query their container’s computed styles directly. Safari on macOS and iOS includes full WebKit support for CSS container style queries. Using Safari Web Inspector, web developers can inspect container contexts, trace computed property inheritance, and debug style query evaluation in real time.

Understanding Container Style Query Syntax

A style query tests whether an ancestor element matches a specific style declaration. In current browser implementations, style queries primarily evaluate CSS custom properties (variables):

/* Define container context on ancestor */
.card-wrapper {
    --theme: dark;
    --variant: callout;
}

/* Child component styles adapt based on ancestor variable */
@container style(--theme: dark) {
    .card-body {
        background-color: #1e1e24;
        color: #f0f0f5;
        border-color: #3b3b4f;
    }
}

@container style(--variant: callout) {
    .card-body {
        border-left: 4px solid #007aff;
        padding-left: 1.25rem;
    }
}

Unlike size queries, style queries do not require declaring container-type: inline-size or container-type: normal on the parent element. Any ancestor element that declares the targeted custom property automatically acts as a valid style container for its descendants.

Enabling Developer Features in Safari

To inspect and debug container queries in Safari, ensure developer features are enabled on macOS:

1. Launch Safari and open Settings (or press Command + ,).
2. Navigate to the Advanced pane.
3. Select Show features for web developers.
4. Close the Settings window.

Right-click the styled child element on your webpage and select Inspect Element to launch Safari Web Inspector.

Inspecting Style Query Rules in the Styles Panel

When Safari Web Inspector opens, select the target child element in the Elements DOM tree. Navigate to the Styles panel on the right:

1. Scroll through the matched CSS rule blocks.
2. Locate the @container style(...) section header displayed above the rule block.
3. Notice how Safari Web Inspector presents the condition. If the style query condition evaluates to true, the enclosed CSS properties are rendered in active black text. If the condition is false or overridden, the entire rule block is greyed out.
4. Click the container link displayed in the @container rule header to immediately jump to and highlight the matching ancestor container in the DOM tree.

Testing Custom Property Values Interactively

You can test theme changes and component state variations live without editing source stylesheets:

1. In the DOM tree, select the ancestor element that declares the custom property (for example, .card-wrapper).
2. In the Styles panel, find the custom property declaration (--theme: dark;).
3. Click the value and change it to light or high-contrast.
4. Select the child element again and observe how WebKit instantly re-evaluates the style query, applying the appropriate conditional styling across the component.

/* Test multi-variable Boolean logic in style queries */
@container style(--theme: dark) and style(--variant: callout) {
    .card-body {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
}

Tracing CSS Variable Inheritance and Cascade Issues

When a style query fails to trigger as expected, the root cause is almost always variable inheritance shadowing or syntax mismatches:

• Intermediate Shadowing: An intermediate DOM element between the container and child may have redeclared --theme with an unexpected value. Inspect the Computed tab in Web Inspector to verify the exact resolved value of the variable at the child node.
• Whitespace Sensitivity: Ensure that the queried value matches the declared value exactly. Declaring --theme: dark; and querying style(--theme:dark) is valid, but values containing trailing whitespace or unquoted strings can cause evaluation failures.
• Registered Properties: If a custom property is registered using @property with a specific syntax (such as <color>), style queries evaluate the typed computed value rather than the raw string token.

Using Safari Web Inspector to inspect and validate CSS Container Style Queries allows web developers to build resilient, self-contained design systems with clean, declarative architecture across all Apple platforms.