Customize

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, which works by applying size & layout containment to the queried elements. Any element with both size & layout containment can be queried using a new @container rule, with similar syntax to existing media-queries. We also define ‘container-relative units’ (cq*) that match the existing ‘viewport-relative units’ (v*).

Resources

Timeline & Documents

Browser Support

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

9 ‘container queries’ episodes

2021

| css spec

CSS Containment 3 (Container Queries) Working Draft

| podcast

What’s Happening in CSS & Sass @ Front End Nerdery

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.

| podcast

CSSWG, Container Queries, Scope, and Layers @ Word Wrap Show

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.

| podcast

Container Queries & the CSSWG @ The F-Word

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

| article

Container Queries Explainer & Proposal CSSWG

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.

2020

| css spec

CSS Containment 3 (Container Queries) Public Notes