v149 · CSS · Container queries

OR Condition Component

A product card with two @container rules that each list comma-separated conditions. The wide layout fires if the container is wide enough OR if a CSS custom property flag is set — with a single rule instead of two.

container width: —
rule 1 firing: —
rule 2 firing: —
← drag right edge to resize →
product image

Mechanical Keyboard

Tactile switches, compact layout.

Full-size mechanical keyboard with tactile switches, per-key RGB, and hot-swap sockets. PBT double-shot keycaps, USB-C with braided cable.

$149.00

Rule 1 (inline-size > 360px, style(--force-wide: 1)): side-by-side layout — inactive
Rule 2 (inline-size > 500px, style(--show-full: 1)): full description — inactive
/* One rule. Two ways to trigger it. */
@container card-container (inline-size > 360px),
           card-container style(--force-wide: 1) {
  .card-inner { flex-direction: row; }
  .card-img { width: 80px; height: 80px; }
}

@container card-container (inline-size > 500px),
           card-container style(--show-full: 1) {
  .card-desc-short { display: none; }
  .card-desc-full  { display: block; }
}

/* Activate the style() branch from JS or a parent rule */
.container-wrap { --force-wide: 1; }

see also

implementation reference

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