Serving iPhone Specific CSS

Sunday, July 8th, 2007

You want to serve a specific CSS file just for iPhone? Read on to learn more about it, or check out the easy way at the bottom of this page if you just want the goods.

Overview

Apple released an article about Optimizing Web Applications and Content for iPhone this week (update: It’s been moved in Apple’s Safari Reference Library). There’s some good info in there, including the iPhone’s Safari User Agent:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

According to Apple, the “iPhone ignores the print and handheld media queries because these types do not supply high-end content.” It all depends on the way you interpret “handheld” I guess… Is it “something you hold in your hand” or is it related to a specific set of technical limitations? The latter was probably the one intended by the W3C, unfortunately their definition of a handheld device (“small screen, monochrome, limited bandwidth”) doesn’t exactly do justice to the iPhone. But the definition just needs an update (which should only take five to ten years…) and Apple knows that. It would have been nice if they decided to support the handheld media type anyway.

I sort of understand the reasoning though: since the iPhone can display regular websites just fine, it doesn’t need specific CSS unless you want to create an alternate version specifically designed to integrate with the rest of the the iPhone’s User Interface. I’m not sure I agree with that, but they give us a way to serve iPhone specific CSS files:

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

And nothing stops you to make it more general and add the handheld type to this, something like:

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

The easy way

The easiest way to serve iPhone specific CSS files though is my CSS override technic. I just updated it for the iPhone so go grab the latest version, add your add_iphone.css file to your css folder, and you’re done.

Filed under: CSS