Container Queries

While media queries provide a method to query aspects of the user agent or device environment that a document is being displayed in (such as viewport dimensions or user preferences), container queries allow testing aspects of elements within the document (such as box dimensions or computed styles).

My Notes ¶

• Comparing Switch & Container
• Containment
• Container Selection Syntax Implications
• Proposal & Explainer
• Explicit Syntax
• Switch Function

Specification ¶

• Editor’s Draft
• Working Draft

Issues ¶

• Github Project
• Github Contain-3 Label
• Request for TAG review

Support ¶

• MDN documentation by Rachel Andrew
• Can I use…

Implementations ¶

• Chromium – in Chrome Canary, go to chrome://flags & “Enable CSS Container Queries” (This is a draft prototype and may not match the final design)

It’s likely that no polyfill can perfectly emulate the feature as specified, but hopefully we can handle the most common use-cases.

• CQFill by Jonathan Neal – still a very early prototype/proof-of-concept, requiring both pre-processor compilation (available for PostCSS) and run-time JS (using ResizeObserver).

Talks & Podcasts ¶

• CSSWG Proposals
• Styling the Intrinsic Web (slides)
• Front End Nerdery
• Container Queries & The Future of CSS (slides)
• Syntax.fm
• Word Wrap Show
• The F-Word
• Smashing Podcast

Articles & Demos ¶

• OddBird Resources
• Container Queries: a Quick Start Guide by David Herron
• A Primer On CSS Container Queries by Stephanie Eckles
• Say Hello To CSS Container Queries by Ahmad Shadeed (annotated on CSS Tricks by Robin Rendle)
• CSS Container Queries For Designers by Ahmad Shadeed
• Container Queries in Web Components by Max Böck
• Container Queries are actually coming by Andy Bell
• CSS Container Queries: A First Look + Demo by Bramus Van Damme
• Next Gen CSS: @container by Una Kravets
• CSS Container Queries: Use-Cases And Migration Strategies by Adrian Bece
• Twitch live-stream highlights & summary by Stephanie Eckles
• My CodePen collection of demos

Query Units:

• CSS Container Query Units by Ahmad Shadeed
• Container Units Should Be Pretty Handy by Chris Coyier

See Also:

• Awesome-Container-Queries by Stuart Robson

Proposals ¶

• 2020 @container proposal by David Baron
• 2020 switch() proposal by Brian Kardell