Container style queries | Frontend Practical Guide

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

Overview

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

Feature	Desktop				Mobile
Feature	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)

CSS

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

CSS --theme: dark demo.

CSS --theme: light demo.

CSS --variant: accent demo.

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.

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.