Skip to content

Instantly share code, notes, and snippets.

Last active August 23, 2023 15:43
  • Star 35 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
The State of Element/Container Queries

The State of Container Queries

tl;dr Developers would like the idea to style components based on a parent's width rather than depend solely on the viewport media query. This would allow modular components to style themselves while being agnostic to the viewport.

There is currently a lot of developer interest in getting a feature like Container Queries (née "Element Queryies") shipped in a browser.

2-min Catchup

Here are official'ish documents to outline the developer community's desires.

Concerns and Current Thinking

Initial feedback from spec authors (namely, Tab Atkins) was that Container Queries could quickly enter recursive layout calculation if a matching query on a child element affected layout on the parent element.

.parent:container(max-width: 500px) { 
  .child { width: 600px } 

Attempts to Polyfill

There are lots of repos dedicated to polyfilling this experience. Each with it's own custom syntax.

Usecases in the Wild

  • Shopify - Using CQs all across the site and User Interface
  • - All news submodules are using EQ.js
  • Cassina Group - Card interface in a Real Estate website

Additional writings and talks

Copy link

3zzy commented May 23, 2018

Copy link

yaypaul commented Oct 23, 2019

RICG CQ Use case URL needs an update to:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment