Hello, I'm Harlan Lewis.

I'm a web & mobile product designer in San Francisco.

🔗 Element Queries Roundup

Using global viewport dimensions in what should be disparate, isolated components leads to a fragile page dependent on layout & positioning interactions between components.

You’re probably already using media queries at the component level instead of in viewport-specific overrides because it’s far easier to maintain a self-contained component than one that’s described in multiple places, but this approach isn’t without tradeoffs - your stylesheets with be littered with duplicate and interdependent breakpoints. It’s too easy to wreck layouts by editing one breakpoint without adjusting all the others it interacts with - pretty much the opposite of DRY.

These problems are alleviated somewhat by using tools like the Compass Breakpoint extension with well-scoped and descriptive breakpoint variable names, or just copiously documentating (volatile) UI code, but those are high-effort workarounds that’s don’t address the problem that we’re using viewport media queries for more than they’re intended. We can make square pegs fit, but it’s hell on the round hole.

Fortunately, people like Tab Atkins (on the Google Chrome team & CSS Working Group) are also thinking about 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.

Tab Atkins

If implemented, element queries would improve encapsulation of UI components, improving flexibility, modularity, and maintainability by defining CSS properties relative to the space available within the layout rather than the size of the entire viewport.

More from around the web:

  • You can start trying the element query approach immediately if you don’t mind manipulating and managing layouts with Javascript (an expensive proposition) using Jonathan T. Neal’s MediaClass.js polyfill. Neal also explored how CSS could be expanded to support media queries for elements.
  • Inspired by Neal’s MediaClass.js, Rob Brackett’s Element Query is another javascript approach to the problem.
  • Ian Storm Taylor also shared examples of media query brittleness and the element query opportunity.
  • Atkin’s article on element queries (also linked above) discussed some of the challenges and and possible solutions, including a new viewport HTML element that would behave similarly to iframe as an independent viewport within a larger page.