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

Incredible Demos

  • By
    Fancy FAQs with jQuery Sliders

    Frequently asked questions can be super boring, right? They don't have to be! I've already shown you how to create fancy FAQs with MooTools -- here's how to create the same effect using jQuery. The HTML Simply a series of H3s and DIVs wrapper...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

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!