Upgrade to Pro — share decks privately, control downloads, hide ads and more …

In search of element queries

Chris wright
April 08, 2016

In search of element queries

Components need to be able to adapt to their available space, not the size of the viewport. Unfortunately, the closest tool we’ve had for addressing this need has been the Media Query, which was not designed for this purpose. As a result, we micromanage our components at different screen sizes - increasing the complexity and brittleness of the component design and lose modularity when a component has a new implementation.
This is a talk exploring element based queries - container queries and our need to go beyond the media query.

Chris wright

April 08, 2016

More Decks by Chris wright

Other Decks in Design


  1. This still needs to be solved, and now we know

    how not to solve it: elements can’t be restyled based on their own properties. - Mat Marquis “
  2. What could make the technique work better? 1. Column breaks

    proper implementation 2. Column-fill & column-span
  3. What could make container source ordering work better? 1. A

    context element 2. Flagging alternate source order in markup 3. If the spec/browsers matched how Firefox does it
  4. Give <picture> a flag to be read in different context

    like iFrame and SVG So how could we avoid having to do this hack? <picture context=“container”>