Preview: Element Queries, From the Feet Up

By  on  

The following is a guest post by Daniel Buchner on something called Element Queries. If you don't know what that is, you're in for a treat!

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.

Daniel Buchner

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.

Recent Features

  • By
    Tips for Starting with Bitcoin and Cryptocurrencies

    One of the most rewarding experiences of my life, both financially and logically, has been buying and managing cryptocurrencies like Bitcoin, Litecoin, Ethereum. Like learning any other new tech, I made rookie mistakes along the way, but learned some best practices along the way. Check out...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

Discussion

  1. MoxHox

    Great post, learn something new everyday!

  2. MrMelt

    The code examples of this render incorrectly in RSS readers (feedbin and reeder)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!