iPhone support for CSS 2

What really makes the iPhone stand apart is its excellent support of CSS and Javascript. Having desktop-grade CSS support means that you can use the same techniques to create mobile experiences as you would a desktop experience. Not only can the iPhone display a usable version of your site even if it isn't optimized for mobile devices, but you can also create mobile web apps quickly and easily.

Traditionally in mobile, you were lucky if a mobile browser supported some CSS2; in fact you were lucky that most devices supported CSS-MP, the subset of CSS2 meant for mobile devices.

The importance of being able to create a consistent user experience across multiple devices was obviously important, but all but a few browsers were merely paying lip service to CSS support for years. That is, that was the case until the iPhone, which motivated the entire mobile industry to invest in their browsers and their ability to bring CSS-based, web standard designs to mobile devices on par with what we are accustomed to on the desktop web.

The iPhone has excellent CSS2 support for a mobile browser. In fact, the iPhone might render CSS a bit better than the desktop web browser you're using these days. Though WebKit and Safari for the desktop support the full CSS2 specification, passing the CSS2 Acid2 test with a 100 percent score, Mobile Safari fails on a number of tests, as seen in the following image.

How the iPhone fares with the Web Standards Project's Acid2 test for CSS2 support



Though Mobile Safari might not have a perfect score, it is certainly at the head of the class in mobile CSS2 support. The vast majority of styling techniques we employ to create desktop designs can also be used to create our mobile designs.

Positioning and page flow

The iPhone supports the majority of positioning techniques, including relative, absolute and fixed positioning. I say "the majority," as the iPhone currently does not support fixed positioning to the bottom of the perceived viewport, which is useful for creating bottom tabbed navigation. This is because Mobile Safari treats the entire browser as the viewport, so when you scroll the page with your finger, you scroll the entire viewport, including any objects that are in a fixed position, to the bottom of the screen.

In my opinion, this is something that Apple needs to fix soon in order to create more useful mobile web app experiences. Luckily, not all mobile browsers based on WebKit follow this model.

In addition to positioning, page flow styling tools like display: and float: all work as expected and can be reliably used to create complex styled sites and web apps.

Image replacement

One of the most common techniques in standards-based designs that is still largely missing from mobile design is the ability to replace text with an image defined by your stylesheet. This allows you to maintain a tight separation from your content and presentation, but more importantly, it means that you can load alternative images that are dependent on the stylesheet being loaded—a trick that can come in handy if you plan to support multiple mobile designs from one markup source.

One of the more common examples is replacing the h1 element, often indicating the title of the page, with your logo. For example, you can put your company name as text within the h1 element in your HTML:

<h1 id="logo">My Company Name<h1>

In CSS, you use the background element to set the logo as a background image, while pushing the actual text beneath the visible area that you define:

#logo {
  background: url(logo.png) no-repeat;
  width: 200px;
  height: 75px;
  overflow: hidden;
  line-height: 10em;
}

But when it really gets fun is when you want to make the iPhone web app backward compatible with lower-end devices that do not support the CSS2 styling techniques. In the example of the logo, simply point to the lowest common denominator (LCD) logo instead of the text:

<h1 id="logo-id001"><img src="lcd-logo.png" alt="My Company Name" /><h1>

In addition to the previous style, when you add the following, you hide the LCD image from iPhones and other capable browsers:

#logo img {
  display: none;
}

It can be a bit challenging to think of your page in multiple modes, considering how it will be viewed on a variety of devices, but once you get the hang of it, image replacement techniques work well to provide a higher-end experience to the iPhone and its equals while maintaining a simple fallback design for those devices that don't quite cut it.