Skip to content
Use cases and requirements for standardizing element queries.
Branch: gh-pages
Clone or download
andykirk and beep Added limitations section first draft (#64)
* Added limitations section first draft

* Added reflow statement from @ausi

* Clarified 'seperate document' statement because of srcdoc.

* Added style inheritance statement proposed by @ausi

* Added iOS content sizing exception raised by @tomhodgins

* Re-phrasing content sizing exception

* Updated number of iframe drawbacks

* Changed to using a dl

* Clarified Fab Four technique and restructured the sentence

* Removed explicit number to avoid having to keep changing this

* Wrapped iframe wording in code tags

* Added iframe point about nested browsing contexts

* Added some clarity to the iOS safari iframe exception

* Restructured the JavaScript wording a little

* Generisized iframe autofit statement, and re-worked the requirement/example

* Fix typos and grammar from @beep

See #64 (comment)
Latest commit 588c8f0 Mar 2, 2018

Use Cases and Requirements for “Container Queries”

Given a complex responsive layout, developers often require a more granular level of control over how the contents of an individual module will respond relative to the size of their parent container rather than the viewport size. This is prohibitive to the goal of creating modular, independent components, often requiring a number of redundant CSS, complex exception cases, and workarounds, and the problem compounds itself depending on how dramatically a module adapts at each of its breakpoints.

This document aims to present some of the use cases that an “element query” syntax would solve, by allowing authors to define layouts within an individual module on the basis of the size of the module itself, rather than the viewport.

The spec proper can be found at

Found a bug? Want to contribute something?

If you found a problem with the document, no matter how small, please file a bug.

See also our contributor's guide.

Proposals for normative changes to this document should take place on the WICG mailing list.

Join us!

Join the WICG and help make the Web a better place for images everything.

Join us on Slack.

You can’t perform that action at this time.