Limited support Useful when Container style queries helps structure space, flow, or sizing without relying on brittle manual adjustments.

Container style queries

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

Layout

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.container.style_queries_for_custom_properties
111
111
Preview
18
111
18
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled
Notes 1 item(s)
Implementation note
  • The document element cannot be a container. See bug 271040.
Notes 1 item(s)
Implementation note
  • The document element cannot be a container. See bug 271040.

Syntax

CSS 
.theme-container {
  --theme: dark;
}
@container style(--theme: dark) {
  .card {
    background: #1e1e1e;
    color: #fff;
  }
}

Live demo

--theme: dark

CSS --theme: dark demo.

PreviewFullscreen

--theme: light

CSS --theme: light demo.

PreviewFullscreen

--variant: accent

CSS --variant: accent demo.

PreviewFullscreen

Use cases

  • Component layout

    Use Container style queries to create more predictable spacing and placement inside reusable UI patterns.

  • Responsive structure

    Adapt containers and flow rules so layouts stay stable across viewport changes.

Cautions

  • Test layout rules with real content, long labels, and small screens before depending on them broadly.
  • Prefer simpler layout primitives if they already solve the problem clearly.

Accessibility

  • Layout choices should preserve reading order and support zoom without clipping.
  • Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.

Related links