Safari® and WebKit Development for iPhone® OS 3.0

Chapter 5. Styling with CSS

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

Safari offers support for CSS 2.1 as well as CSS 3. However, Safari also supports some properties technically called "experimental CSS 3" that are not currently part of the World Wide Web Consortium (W3C) CSS standard but will be supported by Apple going forward. (A -webkit- prefix is added to the names of these properties.) For a normal Web application, developers typically stay away from these experimental properties or at least do not rely on them for their application's design. However, because you know that an iPhone and iPod touch user will be using Safari/WebKit, you can safely use these more advanced styles as you create your UI.

CSS Selectors Supported in 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 to select the exact elements within a Document Object Model (DOM) that you want to work with. If you have worked with CSS before, you are probably quite familiar with the standard type, class, and ID selectors. However, Safari's support for selectors includes many new selectors that are part of the CSS3 specification. Table 5-1 lists a set of CSS selectors that Safari supports, and Table 5-2 lists the set of pseudoclasses and pseudoelements that Safari works with.

Note that ...