May 2026 - Baseline newly available
Container style queries appeared in the May 2026 Baseline digest
Style queries let components react to custom property values on a container, not only its size. They can simplify theme-aware cards, badges, and brand-kit previews, but still need progressive-enhancement fallbacks in reusable components.
Last checked . This staged row is
verified:false and remains noindex until exact public effective dates are rechecked.Browser support note
| Browser | Public note |
|---|---|
| Chrome | May 2026 Baseline digest source |
| Edge | May 2026 Baseline digest source |
| Firefox | May 2026 Baseline digest source |
| Safari | May 2026 Baseline digest source |
Copyable CSS snippet
.card-grid { container-name: cards; --density: compact; }
@container cards style(--density: compact) { .card { padding: .75rem; } }Fallback: Keep the base class usable without the query, and add explicit modifier classes for older browsers.
Replaces: Prop drilling or theme class duplication for some component state variants.
Official sources
- Primary: web.dev: Baseline monthly digest, May 2026
- Secondary: MDN: Container size and style queries