v150 · CSS
Compatibility Lab
Probes browser support for comma-separated @container queries, shows a live before/after comparison with drag-to-resize panels, and provides the fallback CSS pattern — duplicated rules — for browsers that don't yet support the syntax.
browser support probes
live comparison — drag the sliders
Both columns use the same condition: stacks when container is <200px or >400px.
✓ Chrome 150 — comma-separated
Card
Responsive
default
⚠ Fallback — two separate rules
Card
Responsive
default
code comparison
✓ New (Chrome 150) — 1 rule
@container sidebar (max-width: 200px),
sidebar (min-width: 400px) {
.card {
flex-direction: column;
}
}
⚠ Before (duplicated rules)
@container sidebar (max-width: 200px) {
.card {
flex-direction: column;
}
}
/* ↑ Identical block repeated ↓ */
@container sidebar (min-width: 400px) {
.card {
flex-direction: column;
}
}
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗