demo · v149

Mixed query types

Comma-separated @container rules can mix query types: a size query and a style() query in the same rule fire independently. The card below reacts to either a wide container or a CSS custom-property flag being set — one @container rule, two completely different trigger axes.

Drag the resize handle (bottom-right corner of the card) to change container width, or toggle the Featured flag. The blue badge fires from the size branch; the green badge from the style branch; the red badge fires when either is active.
--featured flag:
Container width: 260px

Platform feature card

This body text only appears when the container is wide (>320px). It's triggered by the size branch of the comma-separated rule.

size > 320px --featured: true size OR featured
narrow + off no rules fire
wide + off size fires
narrow + on style fires
wide + on both fire
RuleConditionNarrow + OffWide + OffNarrow + OnWide + On
A (size) (width > 320px) ✗ ✓ ✗ ✓
B (style) style(--featured: true) ✗ ✗ ✓ ✓
C (OR) (width > 320px), style(--featured: true) ✗ ✓ ✓ ✓ 
/* Each condition in the comma list is a different query type */

/* Rule A — pure size query */
@container demo-card (width > 320px) {
  .card-body { display: block; }
  .badge-size { display: inline-block; }
}

/* Rule B — pure style query (custom property) */
@container demo-card style(--featured: true) {
  .badge-style { display: inline-block; }
  .demo-container { border-color: green; }
}

/* Rule C — comma OR: size query OR style query */
@container demo-card (width > 320px), style(--featured: true) {
  .badge-both { display: inline-block; }
}

/* Container needs both container-type values for mixed queries */
.demo-container {
  container-type: inline-size style;
  container-name: demo-card;
}

/* Set the flag via JavaScript or CSS */
.demo-container.is-featured { --featured: true; }

see also

implementation reference

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