Media Queries of the Future!

October 16, 2014

Media queries are infants. The first Media Query public working draft was published in 2001, and they became a W3C recommendation after browser support increased in 2012. 2012! That’s TWO years! Hard to believe, considering how essential they’ve become in our web workflows today. Media queries are most often used to build flexible web designs which adapt to various browsers properties. Here are some pointers from the smart people at Google.

Media Query Capabilities

If you’re familiar with building responsive websites, you’re probably familiar with something like: @media screen and (max-width: 700px), but did you know that you can use media queries to specify how to handle paged braille printers or TVs or how to use logic in your media queries? Yeah, they’re pretty rad.

Here’s a list of current media types you can target:

* = deprecated as media types, but can be used similarly as media features – read on)

And this is what you can specify (expressions) for each of those media types:

This list was stolen from here, by the way.

Responsive Beyond the Browser Size

Media queries are most often used for their screen size properties to allow for “Responsive Web Design”, or RWD. But viewing “responsive design” as just a means for detecting screen sizes and browsers is narrow-minded. Responsive principles go far past the browser and stretch into the real world — how can the products we design respond to a users location, or the weather, or the lighting? How can we really personalize experiences for our users?

Well media queries are helping us get one step closer! As devices are able to detect more, browsers are keeping up to date with these capabilities.

The Future of Media Queries

The Media Queries 4 spec brings insight to technological capabilities that are coming up soon (this is based on the Editor’s Draft, October 10, 2014).

Media Features vs Types

One important distinction to note is that all of the media types* listed above will eventually become deprecated and replaced with more specific media features

Media features are always wrapped in parentheses and combined with the and keyword rather than being separated with semicolons.

Here’s an example from the spec:

(color) and (min-width: 600px) 

@media (light-level) : dim | normal | washed

The light-level media feature is for detection ambient lighting. (Ambient is such a fun word).

Values:

Here’s an example:

// change text coloring due to lighting for better legibility

@media (light-level: dim) {
  body { background: dimgrey;
         color: white;
    }
}

@media (light-level: washed) {
  body { background: white;
         color: black;
         font-size: 2em;
    }
}

@media (pointer) : none | course | fine

The pointer media feature detects the presence and accuracy of a pointing device.

Values:

Here’s an example:

// Make input larger for inaccurate pointing devices

@media (pointer:coarse) {
  input[type="text"] {
    font-size: 3em;
    padding: .5em;
  }
}

@media (hover) : none | on-demand | hover

The hover media feature detects the ability of the primary pointing mechanism to hover over elements.

Values:

* If different input devices have different characteristics, there are also any-pointer and any-hover media features

Here’s an example:

//If hover is difficult, display the menu differently

@media (hover:none) and (hover:on-demand) {
  .menu {
    display: block;
    position absolute;
    ...
  }
}

@media (update-frequency) : none | slow | normal

The update-frequency media feature is used to query the ability of the output device to modify the appearance of content once it has been rendered.

Values:

Here’s an example (stolen right from the spec):

//If a page styles its links to only add underlines on hover,
// it may want to always display underlines when printed:

a {
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: underline;
}

@media (update-frequency: none) {
  a {
    text-decoration: underline;
    }
}

@media (scripting) : none | initial-only | enabled

The scripting media feature detects whether or not Javascript is enabled in the browser.

Values:

This section also borrowed heavily from the these slides, which break down the information from the spec really well.

Remember, it has only been 2 years since the general adoption of media queries and responsive web design. If this is just the beginning, then where are they heading next?