Advanced Search

Log In | Not a Member?

Contact ADC

< Previous PageNext Page > Hide TOC

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 iPhone-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 iPhone. Figure 2-2 shows the same webpage rendered on the desktop.

Figure 2-1  Small device rendering

Figure 2-2  Desktop rendering

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

To specify a style sheet that is just for iPhone 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 iPhone style sheet. Use device-width, max-device-width, and min-device-width to describe the screen size.

For example, to specify a style sheet for iPhone, 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 iPhone, 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">

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) { ... }

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/.

< Previous PageNext Page > Hide TOC

Did this document help you? Yes: Tell us what works for you. It’s good, but: Report typos, inaccuracies, and so forth. It wasn’t helpful: Tell us what would have helped.

	Get information on Apple products. Visit the Apple Store online or at retail locations. 1-800-MY-APPLE Copyright © 2007 Apple Inc. All rights reserved. | Terms of use | Privacy Notice