CSS Tutorial

CSS3 Media Queries

The LINK element is generally used to call external CSS files. The media attribute has a number of values including "handheld". The idea was that the same HTML could be used for personal computers and mobile devices with each reading different CSS based on their media types. However, mobile manufacturers have supported the "screen" and "all" values, and thus mobile devices need to be targeted differently. CSS3 goes beyond offering a simple switch to serve up markup for a handheld device. Different CSS files can be served based on the device width, the current size of the browser, whether the device has color capability, etc.

Media Features

Resembling properties, media features are used to target media in conjunction with values like "screen".

min-width, max-width

This example calls a special style sheet if the media device is a screen and the max-width of the viewing area is 800 pixels wide.

<link rel="stylesheet" media="screen and (max-width: 800px)" href="xyz.css" />

Similarly a section of a style sheet can contain CSS declarations specific to a device or width using an at-rule.

@media screen and (min-width: 1200px) {
  body > div {width: 1160px;}
  header nav ul {width: 1140px}
}

Values can be combined including "min-width" and "max-width", which are intended for serving up different styles based on the current size of the browser.

@media screen and (min-width: 800px) and (max-width: 1200px) {
  section {width: 100px;}
}

A practical application is to serve product displays differently based on browser size. For example, it is very common at an ecommerce site to display products in rows of 3 or 4. Often you need to know how many products will be in a row because you might want to clear the row, and serve up a different style for the last item in all rows—perhaps setting the right margin on all products except for the last one, which you might set to 0. You could serve up different page metrics whether the browser is opened to a certain width, and then display an extra item in each row. This makes for an alternative to what are called "liquid" displays, or pages that use proportional width rather than fixed widths.

@media screen and (min-width: 800px) and (max-width: 1200px) {
  .productRow {width: 1000px;}
}
@media screen and (min-width: 1201px) {
  .productRow {width: 1200px;}
}

max-device-width

This value is used to target some mobile devices.

@media screen and (max-device-width: 480px) {...}

The iPhone can be targeted with "max-device-width: 480px". According to Thomas Maier the iPhone 4 can be targeted thusly. Note the keyword "only" which we will address below.

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" 
  type="text/css" href="../iphone4.css" />

Maier uses this snippet to target the iPad.

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

Orientation

Different styles can be served based on the orientation of the hendheld device.

<link rel="stylesheet" media="all and (orientation: portrait)" href="portraitOrientation.css" />
<link rel="stylesheet" media="all and (orientation: landscape)" href="landscapeOrientation.css" />

Ryan Seddon says that currently orientation is not supported in the iPhone, and offers this as a workaround.

/* Portrait */
@media screen and (max-width: 320px) {
  body { opacity: 1; }
}
/* Landscape */
@media screen and (min-width: 321px) and (max-width: 480px) {
  body { opacity: 0; }
}

Obviously as the device width decreases different styles can be introduced to decrease font sizes, margins and padding, and reduce background image sizing.

More Media Features

Besides "min-width", "max-width", "max-device-width", and "orientation", the W3C offers the following media features.

device-height
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid

Most of these seem to have little application. For example, "scan" is used for TV, and "grid" tests whether the output is grid or bitmap. Here are two examples from the W3C.

@media tv and (scan: progressive) {...}
@media handheld and (grid) and (max-width: 15em) {...}

Keywords

The "not" and "only" keywords can be used to target more concisely. The W3C provides these examples.

<link rel="stylesheet" media="not screen and (color)" href="example.css" />
<link rel="stylesheet" media="only screen and (color)" href="example.css" />

The "not" keyword simply negates the declaration, while the "only" keyword is restrictive.