Element Queries

In response to the increasing push for responsive element queries Tab Atkins is setting the story straight by explaining why it’s so difficult to include this.

The idea of Element Queries is pretty simple – it’s like a Media Query (specifically, the min-width/etc queries), but for a parent or ancestor element, rather than the viewport.

This way, you could create a “component” that is styled one way when it’s in a narrow container (like a sidebar), but another way when it’s got some breathing room (like in the main content of the page), without having to manually specify what kinds of containers are each type – it just naturally happens due to the width of the respective containers.

An excerpt from Element Queries

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.