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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    MooTools Overlay Plugin

    Overlays have become a big part of modern websites; we can probably attribute that to the numerous lightboxes that use them. I've found a ton of overlay code snippets out there but none of them satisfy my taste in code. Many of them are...

  • By
    Form Element AJAX Spinner Attachment Using MooTools

    Many times you'll see a form dynamically change available values based on the value of a form field. For example, a "State" field will change based on which Country a user selects. What annoys me about these forms is that they'll often do an...

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!