CSS Media Queries are not new, but CSS3 is making them considerably more practical for every web developer, and designer to know. They are new ways to serve CSS styles to the browser, with a particular emphasis on targeting mobile devices.
For the Non-Developers
CSS or “Cascading Style Sheets” are what make a website look the way it does. They can control the size of everything on the page from images to text. They control colors, fonts and the overall layout of a site. What Media Queries do, is let us specify change those settings under certain conditions. These changes can be as simple as changing the color of a link, to changing the whole layout.
Now and Then
The most common use for Media Queries up to this point has been the creation of a Print Stylesheet. A Print Stylesheet allows developers to specify how a page should look when it is printed, such as to remove a background color from the page. There are other uses, including ways to create styles for Braille printers, audio devices, handheld devices and even projectors and TVs. The CSS3 guidelines expand on the options that are already available to us, allowing developers to target devices based on the following criteria:
| Width |
The width of the browser window |
min/max |
| Height |
The height of the browser window |
min/max |
| Device-Width |
The maximum pixel width of the device |
min/max |
| Device-Height |
The maximum pixel height of the device |
min/max |
| Orientation |
Portrait or landscape, for devices with accelerometers |
|
| Aspect-ratio |
The aspect ratio of the browser |
min/max |
The CSS3 specification includes a few extra new options, but those will be the most useful for developers and designers right now.
What It Means
All of these things can be combined to create different layouts depending on how the user is viewing the site. Obviously we can’t afford to make a website for every device, but we can use the above properties to change the site layout in stages. For instance, the iPad has a width of 768 in portrait mode. We can call a media query that will execute for all devices with a width of 768 and a width of 480, which will get used on any device that is not as wide as an iPad.
Why It Matters
The web doesn’t just live on computers anymore. People access websites from their phones, tablets, and TVs. Sadly the web doesn’t always look the same on different devices. A site that looks great on your laptop, might be too hard navigate on your phone.
People love the iPad, and the tablet market is exploding. Windows 8 is expected to be launched in 2012, and Microsoft is trying to make its mark with the first operating system that will be available on both tablets and desktop computers. It is no longer good enough to have your website display well in the latest browsers, it needs to look good on the latest devices.
Good coding can take care of most of that. If your website is coded properly, it should display more or less as intended on most devices. Media Queries come in to expand on that. Looking at a website on a 23” monitor and a 4” phone are not the same thing, and the design should reflect that.
A Level of Support
All of the latest versions of Chrome, Opera, Safari, Firefox and even Internet Explorer support media queries. The Android and iPhone browsers have supported them from the beginning. Unfortunately, the Windows Phone 7 browser was built around IE8, and therefore does not support them. But never fear, if you have a mobile stylesheet that is separate from your main stylesheet, the WP7 developers have graciously added a conditional comment that will only be registered by the Windows Phone browser.
How to Use It
There are a few ways to integrate media queries into your website. The first is to include the query in the media attribute of a link tag.
<link rel=”stylesheet” media=”(max-device-width: 600px)” href=”small.css” />
The other main way is to include a media query in your CSS file itself. This can be done by wrapping the styles in a @media call.
@media screen and (min-width:900px) {
.class { background: #666; }
}
Lastly, to render on Windows Phone 7 devices, you will need to use a separate stylesheet, and link it in an IEMobile comment.
<!--[if IEMobile]>
<link rel="stylesheet" media="(device-width: 600px)" href="mobile.css" />
<![endif]-->
Benefits and Drawbacks
The primary benefit of this is that we can display our content in a mobile friendly way without having to deal with the hassles of a mobile site. We can easily create better looking experiences on both large and small screen devices with as little or as much effort as is needed.
On the other hand, unlike a full mobile site you can’t change the structure of the page. You can only change the design. We can still hide or minimize some elements of the page, and even change the order in which they appear, but we can’t add something just for the mobile site. In many cases you can use a different stylesheet to serve up smaller images to mobile users, improving load time. Even an image that is not controlled by the CSS, can be hidden by the stylesheet. You won’t receive the performance boost, but it can help make a more streamlined design.
