Professional iPhone™ and iPod® touch Programming: Building Applications for Mobile Safari™

Chapter 4. Styling with CSS

Like its Mac and Windows cousins, Mobile Safari provides some of the best CSS support of all Web browsers. As you develop iPhone and iPod touch applications, you can utilize CSS to make powerful user interfaces.

Mobile Safari provides support for several of the more advanced -webkit- styles that are not part of the W3C CSS standard. (A -webkit- prefix is added to the names of these properties.) For a normal Web application, developers will typically stay away from these experimental properties or at least not rely upon them for their application's design. However, because you know that an iPhone and iPod touch user will be using Mobile Safari, you can safely use these more advanced styles as you create your UI.

CSS Selectors Supported in Mobile Safari

Many would contend that the real power of CSS is not so much in the properties that you can apply, but in CSS's ability select the exact elements within a DOM that you want to work with. If you have worked with CSS before, you are probably well familiar with the standard type, class, and id selectors. However, Mobile Safari provides selector support that includes many new selectors that are part of the CSS3 specification. Table 4-1 lists a set of CSS selectors that Mobile Safari provides support for, while Table 4-2 lists the set of pseudo-classes and pseudo-elements that Mobile Safari works with.

Note that the following CSS3 selectors are not supported with Mobile Safari:

• :last-child

• :only-child

• nth-child()

• nth-last-child() ...