v150 · CSS · Container Queries

Theme Switcher

A single card switches through three themes depending on container width. The key: @container (width < 280px), (width > 800px) — the comma means either condition triggers the hero style, with no duplicate rule blocks needed.

container width: — px

Set width

Narrow / Hero <280px or >800px

Compact 280–480px

Comfortable 480–800px

Component Theme

Standard

Resize this box using the handle at its bottom-right corner. The card's theme changes as it crosses the comma-separated breakpoints — narrow and extra-wide both get the inverted hero style from a single @container rule.

Drag the resize handle on the card above. The dark "hero" theme fires at both narrow (<280px) and extra-wide (>800px) — configured with a single comma-separated @container query, not two duplicate rule blocks.

/* Comma-separated = OR: narrow OR extra-wide both get the hero style */
@container demo-box (width < 280px), demo-box (width > 800px) {
  .theme-card { background: var(--text-black); color: var(--bg-ivory); }
}

/* Without comma separation this required TWO identical rule blocks */
/* @container demo-box (width < 280px) { ... } */
/* @container demo-box (width > 800px) { ... } ← duplicate! */

@container demo-box (280px <= width <= 480px) {
  .theme-card { padding: 0.6rem 0.75rem; font-size: 0.65rem; }
}

@container demo-box (480px < width <= 800px) {
  .theme-card { background: var(--bg-stone); border-left: 4px solid var(--accent-blue); }
}

implementation reference

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

see also

implementation reference