Comma-separated Container Queries

at a glance

why it exists

Container queries already have and, or, and not logic inside a single condition. But you couldn't write two separate conditions in the same rule that applied if either matched — you had to duplicate the entire rule body. Comma separation mirrors the @media pattern: each comma-separated entry is an independent condition; the block applies if at least one passes. The main use-case is feature-query fallbacks: you can list a new container feature first, then fall back to a simpler width query for browsers that don't support it yet.

syntax

/* Before: two identical rule bodies */
@container sidebar (min-width: 300px) {
  .card { flex-direction: row; }
}
@container sidebar (style(--layout: horizontal)) {
  .card { flex-direction: row; }
}

/* After: one rule, OR semantics */
@container sidebar (min-width: 300px),
           sidebar (style(--layout: horizontal)) {
  .card { flex-direction: row; }
}

You can also target different named containers in the same comma list:

/* Apply if EITHER container matches */
@container main (min-width: 600px),
           sidebar (min-width: 200px) {
  .widget { display: grid; }
}

recipes

Feature + fallback width query

/* Use scroll-state() where supported; fall back to width for older browsers */
@container card (scroll-state(stuck: top)),
           card (min-width: 400px) {
  .card-header {
    position: sticky;
    top: 0;
    background: white;
  }
}

Targeting alternate container names

.sidebar { container: sidebar / inline-size; }
.main    { container: main   / inline-size; }

/* Compact layout if EITHER column is narrow */
@container sidebar (max-width: 200px),
           main    (max-width: 400px) {
  nav { display: none; }
}

browser support

see also

• CSS Conditional Rules Level 5 §@container
• chromestatus: Comma-separated Container Queries
• chrome-platform-showcase: demos