Dan Donald: Element media queries

Dan Donald (@hereinthehive) was speaking about element media queries at Responsive Day Out, these are my notes from his talk.

RWD is open to interpretation.  Device or content oriented breakpoints? 

Be device agnostic.  The web should be universal - should communicate to everyone.

When you visit a website the server gets almost no information about the client.  The one chance we have we know nothing.  What would it change if we knew it was a phone?  The only place we know what it is after we've sent the markup to the client.

What capabilities help us make good decisions?  Screen size.  How do we change things to fit the screen.

Modularity.  How can we find re-usable code?  Abstractions.  Atomic design.  Don't think about a finished, complete, layout - think about the things that make it up.

Element queries

Like a media query but for a single element, not just the whole viewport.

• write normal CSS
• minimal JS to calculate
• use minimum values and ranges

Define CSS trigger points:

[data-width~='20em-30em']

JS runs on load and resize.  JS is can be slow to render, especially when debounced.  JS has to wait for CSS to render before it can calculate.

If there is a layout MQ for a certain width then each module has to reference that in order to react.  With an element MQ it can react to the container in which it finds itself.

Start with the basic layout and enhance up from there.  The basic version should be viable and have a purpose, even if it's not ideal.

Should we use it?  We need to be responsible about how and when we apply new techniques.  There are always caveats with new stuff.  Is this something we really need?  If enough people are looking at something (like responsive images) then maybe there is a case for getting it into browsers - paving the cow paths.

We need to let go.  We need to create ecosystems not pages.  As creators on the web we shape the future of the web.