We need native CSS media queries at the element/component/widget level, not just the viewport. Make it so, internetz.— Nicolas Gallagher (@necolas) February 7, 2013
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.
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:
media queries for elements.
- 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
viewportHTML element that would behave similarly to
iframeas an independent viewport within a larger page.