Preview: Element Queries, From the Feet Up

Element Queries, what are they?

Have you ever wanted to style an element using something like Media Queries, but based on *its own* dimensions instead of the browser's viewport? That's what Element Queries would provide. Having this ability would make responsive styling of layouts and components easier than ever before.

What can we do about it?

Over the last couple of weeks, I have been hacking on a way to provide this functionality using the browser tech we have today. After a ton of experimentation, I've found a solution that will give you untold styling powers of mythical proportion.

Let's dig into an example:

Imagine I have a section element that contains a ul. I want to style the list differently when the container becomes smaller than 300px. The HTML structure below is what this scenario would look like if the elements had already been parsed by the Element Query module:

  

    
One
    
Two
    
Three
  

  

So what's that object element doing in there? How's that going to help with anything? The media="" attribute on the section element is how you declare your Element Query rules. There are two arguments for the media attribute's query() function syntax. The first is an identifying query name that will be added to the matched-media="" attribute when its corresponding CSSMediaRule is matched within the object sensor. As the user, all you need to worry about is adding queries to the media attribute, and styling based on the matched-media attribute, all the rest happens automatically.

Using Element Queries in CSS

Once a query is matched, the name you gave the query will be added to the matched-media attribute. It's a space separated list, so if multiple are matched, you would use it in CSS just like other attributes of this sort - class="", for instance. Here's a post by Chris Coyier on all the ways you can style elements based on their attribute values: http://css-tricks.com/attribute-selectors/. Here's an example of what writing CSS against an Element Query match looks like, based on the HTML example content above:

section[matched-media~="small-width"] {
  font-size: 50%; /* small text for a wee lil element! */
}

/*** Example for styling multiple matches: ***/

section[matched-media~="small-width medium-height"] {
  ...
}

Demo & Read the Detailed Post!

I have a deep-dive post here on my blog if you are interested in using Element Queries or learning more about how it works: http://www.backalleycoder.com/2014/04/18/element-queries-from-the-feet-up

Demo note: resize your browser window and click the shapes to trigger query break-points.

About Daniel Buchner

Daniel Buchner is a Product Manager and web hacker who worked at Mozilla for 5 years to push the Web forward. He participates in W3 standards discussions and specs. Most recently, he helped drive the Web Components family of specs at Mozilla, and wrote the X-Tag Web Components library that serves as the foundation for Mozilla's Brick component set.

www.backalleycoder.comcsuwildcatPosts