coderef

Container style queriesBaseline · Newly available

Container style queries with the @container at-rule apply styles to an element based on the values of custom properties of its container.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since May 19, 2026.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–110Not supported
111+Supportedsince Mar 7, 2023
Current: 155
Edge
12–110Not supported
111+Supportedsince Mar 13, 2023
Current: 154
Firefox
1–150Not supported
151+Supportedsince May 19, 2026
Current: 157
Safari
1–17.6Not supported
18+Supportedsince Sep 16, 2024
Current: 27
MobileChrome Android
18–110Not supported
111+Supportedsince Mar 7, 2023
Current: 155
Firefox Android
4–150Not supported
151+Supportedsince May 19, 2026
Current: 157
Safari iOS
1–17.6Not supported
18+Supportedsince Sep 16, 2024
Current: 27

How to use

Every current browser supports this, but it only became Baseline on May 19, 2026. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

CSS
.card-list { --variant: compact; }

@container style(--variant: compact) {
  .card { padding: 4px; font-size: 0.875rem; }
}

Feature detection

There’s no simple runtime check for this feature; rely on the support table and test in your target browsers.

Specification

Usage share