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:
all— all the media types below
braille* — braille tactile feedback devices
embossed* — paged braille printers
handheld* — handheld devices like mobile phones
projection* — projected presentations
screen— color computer screens
speech— speech synthesizers
tty* — teletypes, terminals, and other devices with limited display capabilities
tv* — televisions and television like devices
* = 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:
width— width of the current window
height— height of the current window
device-width— width of the device
device-height— height of the device
orientation— either landscape or portrait
aspect-ratio— aspect ratio of the current window
device-aspect-ratio— aspect ratio of the device
color— number of color bits per color component
color-index— number of available colors on the device
monochrome— number of bits per pixel in a monochrome frame buffer
resolution— resolution of the device
scan— either progressive or interlace
grid— is the device grid-based?
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?
viewing “responsive design” as just a means for detecting screen sizes and browsers is narrow-minded
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:
@media (light-level) : dim | normal | washed
light-level media feature is for detection ambient lighting. (Ambient is such a fun word).
dim— lighting in a dim environment (i.e. nighttime)
normal— lighting in the “ideal screen range”
washed— lighting in an overly bright environment (i.e. broad daylight)
Here’s an example:
@media (pointer) : none | course | fine
pointer media feature detects the presence and accuracy of a pointing device.
none— there is no pointing device present (i.e. TV, printer)
course— the primary input mechanism is of limited accuracy (i.e. Nintendo Wii, Kinect, Google Glass)
fine— the primary input mechanism is an accurate pointing device (i.e. stylus, mouse, touchpad)
Here’s an example:
@media (hover) : none | on-demand | hover
hover media feature detects the ability of the primary pointing mechanism to hover over elements.
none— there primary pointing mechanism can’t hover
on-demand— the user can hover but it requires significant action (i.e. touch screens)
fine— the primary pointing system can easily hover
* If different input devices have different characteristics, there are also
any-hover media features
Here’s an example:
@media (update-frequency) : none | slow | normal
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.
none— once rendered, the layout will not update (i.e. printed materials)
slow— the layout may change dynamically but not smoothly (i.e. e-ink displays)
normal— the output device is not constrained
Here’s an example (stolen right from the spec):
@media (scripting) : none | initial-only | enabled
none— scripting is not supported by the user agent, or innactive
enabled— scripting is supported and active
initial-only— scripting is supported on initial page load, but not afterwards
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?