Container Queries

Category: CSS
Type: New or changed feature
Status: Enabled by default (Chrome 105)
Intent stage: Prepare to ship

Breaking change: No
Enterprise impact: None
Chromium flag: CSSContainerQueries
Spec maturity: Working draft
Web Platform Tests: No

WPT details: https://wpt.fyi/results/css/css-contain/container-queries?label=experimental&label=master&aligned https://wpt.fyi/results/css/css-contain?label=master&label=experimental&aligned&q=%2Fcss%2Fcss-contain%2Fcontain-inline-size*

Summary

Container Queries allow authors to style elements according to the size of a container element. It's similar to a @media query, except it evaluates against the size of a container instead of the size of the viewport.

Standards & signals

Specification: https://drafts.csswg.org/css-contain-3/#container-queries
Firefox: In development — See implementation activity reachable from that bug.
Safari: Shipped/Shipping
Web developers: Strongly positive
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1145970

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=%2Fcss%2Fcss-contain%2Fcontain-inline-size*
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Container%20Queries
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Container%20Queries
Baseline status: https://webstatus.dev/?q=Container%20Queries

Explainers: https://css.oddbird.net/rwd/query/explainer

View on chromestatus.com