skip to content

CSS Containment Level 3 defines Container Queries and container-relative units – allowing authors to build more intrinsic responsive components without knowledge of the overall layout.

Media-queries allow an author to make style changes based on the overall viewport dimensions – but in many cases, authors would prefer styling modular components based on their context and available space within a layout. Earlier this year, David Baron & Brian Kardell proposed two complementary approaches to explore: a @container rule, and a switch() function. Both could be useful in different cases.

This specification builds on David Baron’s @container approach, with a syntax that is similar to media queries. We also define ‘container-relative units’ (cq*) that match the existing ‘viewport-relative units’ (v*).

Resources

Browser Support

Data on support for the css-container-queries feature across the major browsers from caniuse.com

Data on support for the css-container-query-units feature across the major browsers from caniuse.com

Past Events

Everything 'Container queries'