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'

Container Queries in Browsers!

» post

After nearly 15 years as a highly-requested feature in CSS – and 15 years being told it was impossible – (size) Container Queries and units have shipped in both Chrome/Edge 105, and Safari 16! Firefox is not far behind.

Intrinsic CSS with Container Queries & Units

» talk

Container queries & units have a lot to offer as we enter a more content-out era of Intrinsic Web Design, but they also come with some limitations of their own. Join Miriam to learn about how the feature works, how to start using it in production, and what to look forward to as Container Queries continue to evolve.

Use the Right Container Query Syntax

» elsewhere

Since we got a first look at a Container Queries prototype back in April 2021, the syntax has changed a few times. But now the spec is stable, browsers are getting ready to ship, and it’s time to make sure you’re using the same syntax they are!

Styling the Intrinsic Web

» podcast

I talk with Noel Minchow about how to style the intrinsic web, what that means, and how it’s compatible with responsive design.

Teleportation, PapayaWhip, and Cookies

» podcast

I talk with Claire and Steph about changes to the Container Query syntax, our feelings about web components, named CSS colors, how much we like eating cookies, and other wild tangents.

Making Sense of CSS Layers and Scope

» podcast

CSS is evolving rapidly and new features come online all the time. Join Morten & Miriam to talk about what CSS layers and scope are all about and how they will change how we work with and think about the cascade in the future.

Styling the Intrinsic Web

» talk

Over the last decade, Responsive Web Design and Object Oriented CSS have grown from exciting new trends into the foundations of modern, component-driven web design. But our medium is not done evolving.

What’s Happening in CSS & Sass

» podcast

A podcast focusing on front end development but also covering a wide range of web development and design topics. We talked about CSS, Sass, and work being done in the W3C CSS Working Group.

CSSWG, Container Queries, Scope, and Layers

» podcast

I talk with Claire and Steph about my journey into webdev and onto the CSSWG, what I find frustrating about how others use CSS, and the three specs I’m working on.

Container Queries & the CSSWG

» podcast

I chat with Bruce Lawson & Vadim Makeev about Sass & Susy, CSS Layers & compatibility, Container Queries, and the CSS Working Group.

Container Queries Explainer & Proposal

» post

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 within a layout.

Container Queries & The Future of CSS

» talk

New CSS proposals like Container Queries, Cascade Layers, Scoped Styles, and Nesting are all aimed at improving the way we write responsive components and design systems.

CSS Containment 3 (Container Queries)

» spec

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.