Comma-separated Container Queries

at a glance

why it exists

CSS media queries have always allowed comma-separated condition lists as an OR gate:

/* Applies if EITHER condition is true */
@media (max-width: 600px), print { ... }

Container queries launched without this feature — you could only specify a single condition per @container rule. The workaround was to duplicate the entire rule block:

/* Verbose: same styles, two rules */
@container sidebar (min-width: 300px) {
  .card { display: flex; }
}
@container main (min-width: 600px) {
  .card { display: flex; }
}

Chrome 150 adds parity with @media: a comma-separated list of container conditions within a single rule, matching when any condition is satisfied.

syntax

@container [<container-name>]? <container-query>
         [, [<container-name>]? <container-query>]* {
  /* declarations */
}

Each comma-separated item can independently name a different container. The block's styles apply when any one of the conditions matches — OR semantics, not AND.

examples

same style for two different containers

/* Before Chrome 150: two identical rule blocks */
@container sidebar (min-width: 300px) {
  .card { display: flex; gap: 1rem; }
}
@container main-content (min-width: 500px) {
  .card { display: flex; gap: 1rem; }
}

/* Chrome 150+: one rule */
@container sidebar (min-width: 300px),
           main-content (min-width: 500px) {
  .card { display: flex; gap: 1rem; }
}

mixing size and style queries

/* Activates when the layout container is narrow,
   OR when the theme token is set to compact */
@container layout (max-width: 400px),
           style(--density: compact) {
  .item { padding: 0.25rem; }
}

unnamed containers (implicit)

/* Either nearest inline-size container is over 400px,
   or block-size container is over 600px */
@container (min-width: 400px), (min-height: 600px) {
  .hero { font-size: 2rem; }
}

Each unnamed condition matches against the nearest eligible ancestor container independently.

browser support

see also

• CSS Conditional Rules Level 5 — @container
• MDN: @container
• chromestatus.com — Comma-separated Container Queries (6196591858941952)