Comma-separated Container Queries

concepts

1. Fallback Layout

   A card that activates a "compact" layout when it's either very narrow (no sidebar) or when it's inside a narrow column container — one @container rule covers both cases using a comma-separated list.

2. OR Breakpoints

   A navigation component that goes to a collapsed state at either the sidebar container being narrow or the main container being wide — a pattern that was previously impossible without duplicate rules.

3. Multi-container Grid

   A product card that stacks when either the sidebar container is narrow or the main container is narrow — one @container sidebar (…), main (…) rule covers both contexts. Drag two independent width sliders and watch the single CSS rule fire from either direction.

4. Sidebar Adapter

   A profile card placed in both the sidebar and main area — compact mode triggers from either container independently. Two resizeable panels, one comma-separated rule, badges show which container is currently firing.

5. Theme Switcher

   A card that switches between three themes (dark hero, compact, comfortable) based on container width. The dark hero theme fires at both narrow (<280px) and extra-wide (>800px) via one comma-separated @container rule — what would otherwise require two identical rule blocks. Drag the resizable box to cycle through all three zones.

6. Authoring Studio

   Build a comma-separated @container rule visually — add named container conditions, set breakpoints, pick the triggered CSS property, and resize a live preview to see which queries fire. Generates a copyable CSS block.

7. Compatibility Lab

   Five CSS.supports() probes for comma-separated container queries (basic @container, named containers, comma syntax, container-type, container-name). Includes a side-by-side resizable comparison of the new single-rule syntax versus the old duplicated-rule fallback, with code blocks for both patterns.

why it shipped

The original @container rule supported a single condition — you could use and / or / not inside a single query, but if you needed the same block to fire for two completely different containers, you had to duplicate the rule. Comma-separated queries solve this the same way comma-separated media queries do: @media screen, print applies when either condition is true. The feature landed in Firefox first and the interop gap prompted Chrome to ship it, completing the pattern across all major engines.

references

• ChromeStatus entry
• CSS Containment Level 3 spec — @container rule
• MDN — @container