v149 · developer trial · css

Comma-separated Container Queries

An @container rule can now hold several queries separated by commas. The block applies if any one of them matches — the same shape that's worked for @media and @supports forever, finally extended to container queries.

concepts

  1. Fallback Query

    Demonstrates the canonical use case: a comma-separated query that takes a feature query branch when it's supported and a named-container branch when it isn't. Resize the container, toggle the support hint, and watch which branch fires.

  2. Breakpoint Matrix

    Five fixed-width frames running one rule whose comma branches mix a container-size query and a user-preference query. Shows how a single declaration can be triggered by either axis, and reads conditionText back from CSSOM.

  3. Multi-condition Explorer

    Drag the container edge to resize, and watch the status badges update in real time. Rule 2 has a comma-separated OR: blue border appears at <250px AND again at >500px — both triggered by a single @container rule.

  4. OR Condition Component

    A product card whose layout switches when the container is wide enough OR when a CSS custom property flag is set — both conditions in a single comma-separated @container rule. Toggle the flags to fire the style() branch even at narrow widths.

  5. Conditions API Inspector

    Walk the CSSOM and list every CSSContainerRule on the page. Reads conditionText for each rule and splits comma-separated expressions into individual conditions. Flags multi-condition rules and checks for the upcoming rule.conditions[] array.

  6. Mixed Query Types

    Comma separation lets a single @container rule span completely different query types — a size query and a style() query side by side. A resizable card with a CSS custom-property flag shows how each branch fires independently and how Rule C (the comma OR) captures both axes, with a live truth table.

why it shipped

Container queries are powerful but each @container rule could only express a single condition. Authors wrote two near-identical blocks to handle "wide container OR narrow but named". Worse, you couldn't write a clean fallback against feature support — you had to repeat the entire rule body twice. Comma-separated container queries make container CSS look like its @media and @supports cousins. The CSSContainerRule API gains a conditions attribute that returns each component query.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗