CSS 3 Media Queries

By | January 6, 2012

CSS3 Media Queries. OK, first serious topic of the year is a title I actually wrote down back in May last year (during my period of high activity on the site) but then the sleepless nights caught up with me and then before you know it it’s Christmas.
This is THE hot topic around the web at the moment due to the Responsive Web Design movement which is going on so here I’m just going to put down the best way ( as I see it) to create your CSS3 media queries. Then in my 2nd post on the subject we’ll look at how to build a responsive layout. Sound good? Great.
So where do we start and whats it all about?

Thinking inside many boxes

Modern web design has a issue, bigger even than IE6. The problem is the vast array of devices that can be used to access the internet. We have phones, smart phones, 7″ tablets, iPads, laptops, old desktops, new desktops and a whole other array of devices I’ve probably missed.
So up until now we’ve ignored all this and gone for the “lowest” common denominator which was widely regarded as 1024x768px. All well and good, you may think, but it isn’t. Because this is no longer the smallest resolution. Phone screens are. And the bigger screens cause other issues.

So how do we deal with this?

Well the W3C’s first stab at this was with CSS2 when they introduced just different media types. Have you ever created a separate print stylesheet?


Or you could do:

@media screen {
  body {
  font-size: 100%;
 }
}
@media print {
 body {
  font-size: 15pt;
 }
}

So the idea is quite simple. If the display is screen show one set of styles if the page is going to be printed use another set of styles.
This is a good idea, but in practice not much help. There were lots of media types available such as: all, braille, embossed, handheld, print, projection, screen, speech, tty, and tv. But to be honest I only ever used screen and print.

Now for the good stuff

So the W3C realised the shortcomings of the orignal spec and so added an extra query to the statements. Now all queries have 2 queries.

@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}
}

So the query asks two questions: first, does it belong to the screen media type; and if it does, is it’s viewport at least 1024 pixels wide. If both criteria are met then execute the css in the block.
Our media query above is written as part of an @media declaration, which enables us to put queries directly inside a stylesheet. But you can also place queries on link elements by inserting them into the media attribute:

So what queries are available?

There are many queries available not just testing for the width of the viewport. Below is a table with all the different queries.

Feature Name Definition Has min- and max- Prefixes
width The width of the display area. Yes
height The height of the display area. Yes
device-width The width of the device’s rendering surface. Yes
device-height The height of the device’s rendering surface. Yes
orientation Accepts portrait or landscape values. No
aspect-ratio Ratio of the display area’s width over its height. For example: on a desktop, you’d be able to query if the browser window is at a 16:9 aspect ratio. Yes
device-aspect-ratio Ratio of the device’s rendering surface width over its height. For example: on a desktop, you’d be able to query if the screen is at a 16:9 aspect ratio. Yes
color The number of bits per color component of the device. For example, an 8-bit color device would successfully pass a query of (color: 8). Non-color devices should return a value of 0. Yes
color-index The number of entries in the color lookup table of the output device. For example, @media screen and (min-color-index: 256). Yes
monochrome Similar to color, the monochrome feature lets us test the number of bits per pixel in a monochrome device. Yes
resolution Tests the density of the pixels in the device, such as screen and (resolution: 72dpi) or screen and (max-resolution: 300dpi). Yes
scan For tv-based browsing, measures whether the scanning process is either progressive or scan. No
grid Tests whether the device is a grid-based display, like feature phones with one fixed-width font. Can be expressed simply as (grid). No

As you can see a whole host of things to play with.
What’s really exciting is that we can chain multiple queries together with the and keyword:

@media screen and (min-device-width: 480px) and (orientation: landscape) { … }

This allows us to test for multiple features in a single query, creating more complex tests for the devices viewing our designs.
As usual support is still developing among modern browsers and devices, so be sure to check that your target browser supports the features.

So media queries give us the ability to target very specifically different devices with different attributes. In my next post I will talk about how we use this ability to create new exciting and innovative web sites using these brilliant new additions to the CSS spec.

Leave a Reply

Your email address will not be published. Required fields are marked *