Media Queries To Gain Super Powers

As W3C release a new editors draft of media Queries level 4, it seems our current meagre media query abilities are to be upgraded. We currently have abilities based mainly around viewport sizes, but we’re to gain mega super powers with the ability to deliver upon colour, pointers and luminosity.

Just in case you’ve never used Media Queries before, the Editors Draft explains: Media Queries allow authors to adapt the style applied to a document based on the environment the document is being rendered in. [HTML401] and [CSS21] introduced this mechanism, by allowing detection of the media type. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed.

Expanding device landscape, it’s soooo Needy!

There is a great need to go beyond  just viewport sizes, as our device landscape expands further from our smart phones and tablets along with our traditional desktop and laptops and into Household devices such as TV’s and game consoles, and other highly portable devices such as GPS systems on cars and bikes. Media queries will need to be more specific to different types of conditions.

The device landscape is going to keep changing and there are some interesting user case’s to be designed for – for instance our GPS Systems would have a changing climate, with different weather and light conditions.

I went mountain biking yesterday with my iPhone 5 running a GPS App, I started the ride in overcast weather in good light and an hour later checked my average ride speed atop a hill with a dark cloud and rain. A higher contrast style on the App would have certainly helped me in the afternoon.

Highlights from the Editors Draft:

Luminosity Media Feature

The ‘luminosity’ media feature is used to query about the ambient luminosity in which the device is used, to allow the author to adjust style of the document in response.

Hover Media Feature

The ‘hover’ media feature is used to query whether primary pointing system used on the output device can hover or not.

Pointer Media Feature

The ‘pointer’ media feature is used to query about the presence and accuracy of a pointing device such as a mouse. If a device has multiple input mechanisms, it is recommended that the UA reports the characteristics of the least capable pointing device of the primary input mechanisms.

Read the official W3C Editors draft here and get excited, in the future we’re going to get some pretty cool super powers.

Responsive Web Design: Media Queries

Media Queries allow us to design for different kinds of media, you have probably seen these used to create a print stylesheet for your web document.

The W3C (World Wide Web Consortium) who standardise web technologies have introduced a whole array of Media Queries to cope with our varied device landscape;

Media queries can identify types of media; Screen, Print Braille, but they can also importantly identity the physical characteristics of the viewing device, for instance the width of the screen.

Read More