Without the CSS3 media query module, we would be unable to target particular CSS styles at particular device capabilities, such as the viewport width. If you head over to the W3C specification of the CSS3 media query module (http://www.w3.org/TR/css3-mediaqueries/), you'll see that this is their official introduction to what media queries are all about:
HTML 4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. 'screen' and 'print' are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are 'width', 'height', and 'color'. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.
So what does a CSS media query look like and more importantly, how does it work?
Enter the following code at the bottom of any CSS file and preview the related web page:
body {
background-color: grey;
}
@media screen and (max-width: 960px) {
body {
background-color: red;
}
}
@media screen and (max-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 320px) {
body {
background-color: green;
}
} Now, preview the file in a modern browser (at least IE 9 if you use IE) and resize the browser window. The background color of the page will vary depending upon the current viewport size. I've used named colors here for clarity but ordinarily you'd use a HEX code; for example, #ffffff.
Now, let's go ahead and break down these media queries to understand how we can make best use of them.
If you are used to working with CSS2 stylesheets you'll know it's possible to specify the type of device (for example, screen or print) applicable to a stylesheet with the media attribute of the <link> tag. You could do so by placing a link as done in the following code snippet within the <head> tags of your HTML:
<link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">
What media queries principally provide is the ability to target styles based upon the capability or features of a device, rather than merely the type of device. Think of it as a question to the browser. If the browser's answer is "true", the enclosed styles are applied. If the answer is "false", they are not. Rather than just asking the browser "Are you a screen?"—as much as we could effectively ask with just CSS2—media queries ask a little more. Instead, a media query might ask, "Are you a screen and are you in portrait orientation?" Let's look at that as an example:
<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css" />
First, the media query expression asks the type (are you a screen?), and then the feature (is your screen in portrait orientation?). The portrait-screen.css stylesheet will be loaded for any screen device with a portrait screen orientation and ignored for any others. It's possible to reverse the logic of any media query expression by adding not to the beginning of the media query. For example, the following code would negate the result in our prior example, loading the file for anything that wasn't a screen with a portrait orientation:
<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait-screen.css" />
It's also possible to string multiple expressions together. For example, let's extend our first media query example and also limit the file to devices that have a viewport greater than 800 pixels.
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" />
Further still, we could have a list of media queries. If any of the listed queries are true, the file will be loaded. If none are true, it won't. Here is an example:
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" />
There are two points to note here. Firstly, a comma separates each media query. Secondly, you'll notice that after projection, there is no trailing and or feature/value combination in parentheses. That's because in the absence of these values, the media query is applied to all media types. In our example, the styles will apply to all projectors.
Just like existing CSS rules, media queries can conditionally load styles in a variety of ways. So far, we have included them as links to CSS files that we would place within the <head></head> section of our HTML. However, we can also use media queries within CSS stylesheets themselves. For example, if we add the following code into a stylesheet, it will make all h1 elements green, providing the device has a screen width of 400 pixels or less:
@media screen and (max-device-width: 400px) {
h1 { color: green }
} We can also use the @import feature of CSS to conditionally load stylesheets into our existing stylesheet. For example, the following code would import the stylesheet called phone.css, providing the device was screen based and had a maximum viewport of 360 pixels:
@import url("phone.css") screen and (max-width:360px);Remember that using the @import feature of CSS, adds to HTTP requests (which impacts load speed); so use this method sparingly.
When building responsive designs, the media queries that get used most often relate to a device's viewport width (width) and the width of the device's screen (device-width). In my own experience, I have found little call for the other capabilities we can test for. However, just in case the need arises, here is a list of all capabilities that media queries can test for. Hopefully, some will pique your interest:
width: The viewport width.height: The viewport height.device-width: The rendering surface's width (for our purposes, this is typically the screen width of a device).device-height: The rendering surface's height (for our purposes, this is typically the screen height of a device).orientation: This capability checks whether a device is portrait or landscape in orientation.aspect-ratio: The ratio of width to height based upon the viewport width and height. A 16:9 widescreen display can be written asaspect-ratio: 16/9.device-aspect-ratio: This capability is similar toaspect-ratiobut is based upon the width and height of the device rendering surface, rather than viewport.color: The number of bits per color component. For example,min-color: 16will check that the device has 16-bit color.color-index: The number of entries in the color lookup table of the device. Values must be numbers and cannot be negative.monochrome: This capability tests how many bits per pixel are in a monochrome frame buffer. The value would be a number (integer), for examplemonochrome: 2, and cannot be negative.resolution: This capability can be used to test screen or print resolution; for example,min-resolution: 300dpi. It can also accept measurements in dots per centimetre; for example,min-resolution: 118dpcm.scan: This can be either progressive or interlace features largely particular to TVs. For example, a 720p HD TV (the p part of 720p indicates "progressive") could be targeted withscan: progressivewhilst a 1080i HD TV (the i part of 1080i indicates "interlaced") could be targeted withscan: interlace.grid: This capability indicates whether or not the device is grid or bitmap based.
All the above features, with the exception of scan and grid, can be prefixed with min or max to create ranges. For example, consider the following code snippet:
@import url("phone.css") screen and (min-width:200px) and (max-width:360px);Here, a minimum (min) and maximum (max) have been applied to width to set a range. The phone.css file will only be imported for screen devices with a minimum viewport width of 200 pixels and a maximum viewport width of 360 pixels.
As you're, no doubt, aware that CSS stands for Cascading Style Sheet. By their very nature styles further down a cascading stylesheet override equivalent styles higher up (unless styles higher up are more specific). We can therefore set base styles at the beginning of a stylesheet, applicable to all versions of our design, and then override relevant sections with media queries further on in the document. For example, set navigation links as simple text links for the large viewport version of a design (where it's more likely that users will be using a mouse) and then overwrite those styles with a media query to give us a larger target area (for finger presses) for more limited viewports.
Although modern browsers are smart enough to ignore media query targeted files that are not intended for them, it doesn't always stop them actually downloading the files. There is therefore little advantage (apart from personal preference and/or compartmentalization of code) in separating different media query styles into separate files. Using separate files increases the number of HTTP requests needed to render a page, which in turn makes the page slower to load.nd.js (https://github.com/scottjehl/Respond) for adding partial media query support to Internet Explorer 8 and lower versions is also currently unable to parse CSS referenced by the @import command. I'd therefore recommend adding media queries styles within an existing stylesheet. For example, in the
existing stylesheet, simply add the media query using the following syntax:
@media screen and (max-width: 768px) { YOUR STYLES }