Element Queries

Responsive Web Design's Unicorn

@bensmithett

Who knows CSS?

Preprocessor (Sass or Less)?

BEM

SMACSS

OOCSS

We used to design & build pages

We don't do pages any more

We design & build components

HTML

<div class="my-component">
  ...
</div>

.my-component { color: blue; }

$( ".my-component" ).doSomething();

Responsive Components

Page : Device

Component : Container

How do we make a componentrespond to changes in its own size?

Window: Media Queries

Element: ???

Element Queries!

April 2013

Media Queries are a Hack

by Ian Storm Taylor

Media Query

@media ( min-width: 1024px ) { 
  .my-component { 
    color: yellow;
  }
}

.my-component:min-width( 600px ) { 
  color: yellow;
}

:(

Element Queries don't exist

why?

circular dependencies

.container {
  float: left;
}

.child {
  width: 500px;
}

.container:min-width (450px) > .child {
  width: 400px;
}

Limitations & challenges explained in

Element Queries

by Tab Atkins (Chrome dev)

How to build Responsive Components?

Element Queries

iframes!

• Establish a new viewport
• Regular Media Queries work
• Size of iframe element isn't affected by size of child elements
• No circularity!

Downsides

• Performance
• Don't inherit CSS from parent document
• Makes JavaScript really annoying

How to build Responsive Components?

Element Queries

iframes

Fake Element Queries with JS!

Fake Element Queries with JS

• Watch element
• Detect when it changes size
• Update a class

.my-component {
  color: green
}

/* .my-component:min-width( 600px )  */
.my-component.gt-600px {
  color: yellow
}

Downsides

• Detecting when an element changes size is surprisingly difficult
• Solutions are hacky: polling, invisible sensor elements, cross browser drama
• Verdict: maaaybe. Wouldn't do it in production tomorrow.
• :min-width prollyfill
• Cross-Browser, Event-based, Element Resize Detection

How to build Responsive Components?

Element Queries

iframes

Fake Element Queries with JS!

.my-component,
.my-component--does-respond {
  color: green
}

@media ( min-width: 1024px ) {
  .my-component--does-respond {
    color: yellow
  }
}

Responsive components:

Components that work everywhere where you need them to.

But what does the future hold?

Web Components

• Isolated, sandboxed chunks of HTML, CSS & JavaScript
• Only in Chrome so far
• Polymer polyfill

Element Queries!

In summary...

• Design & build libraries of responsive components!
• Use BEM class names
• We might get Element Queries one day!

Thanks!

I'm @bensmithett on the internet