Instantly share code, notes, and snippets.

Embed
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
  • Weather.com - All news submodules are using EQ.js
  • Cassina Group - Card interface in a Real Estate website

Additional writings and talks

@3zzy

This comment has been minimized.

Show comment
Hide comment
@3zzy

3zzy commented May 23, 2018

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