Using Conditional CSS

Once you use CSS to lay out your webpage in columns, you can use conditional CSS to create different layouts for specific platforms and mobile devices. Using CSS3 media queries, you can add iOS-specific style sheets to your webpage without affecting how your webpages are rendered on other platforms.

For example, Figure 2-1 shows a webpage containing conditional CSS specifically for iOS. Figure 2-2 shows the same webpage rendered on the desktop.

CSS3 recognizes several media types, including print, handheld, and screen. iOS ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iOS.

To specify a style sheet that is just for iOS without affecting other devices, use the only keyword in combination with the screen keyword in your HTML file. Older browsers ignore the only keyword and won’t read your iOS style sheet. Use max-device-width, and min-device-width to describe the screen size.

For example, to specify a style sheet for iPhone and iPod touch, use an expression similar to the following:

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

To specify a style sheet for devices other than iOS, use an expression similar to the following:

<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">

To load styles intended for users with Retina displays only, use an expression similar to the following:

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

Alternatively, you can use this format inside a CSS block in an HTML file, or in an external CSS file:

@media screen and (min-device-width: 481px) { ... }

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

Here are some examples of CSS3 media-specific style sheets where you might provide a different style for screen and print. Listing 2-1 displays white text on dark gray background for the screen. Listing 2-2 displays black text on white background and hides navigation for print.

Listing 2-1  Screen-specific style sheet

@media screen {

        #text { color: white; background-color: black; }

}

Listing 2-2  Print-specific style sheet

@media print {

        #text { color: black; background-color: white; }

        #nav  { display: none; }

}

For more information on media queries, see: http://www.w3.org/TR/css3-mediaqueries/.