S tyling 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


84
Table 4-1: Mobile Safari CSS Selectors
Selector Definition
E
Type selector
.class
Class selector
#id
ID selector
*
Universal selector (all elements)
E F
Descendant selector
E > F
Child selector
E + F
Adjacent sibling selector
E ~ F
Indirect adjacent selector
a
E[attr]
attr is defined
E[attr=val]
attr value matches val
E[attr~=val]
One of many attribute value selectors
b
E[attr|=val]
attr value is a hyphen-separated list and begins with val
b

Content after an element (new double-colon notation in
CSS3)
a
E:first-letter
First letter of element
c04.indd 84c04.indd 84 12/7/07 2:45:24 PM12/7/07 2:45:24 PM
Chapter 4: Styling with CSS
85
Pseudo-Class/ Pseudo-Element Definition
E::first-letter
First letter of element (new double-colon notation in
CSS3)
a
E:first-line
First line of element
E::first-line
First line of element (new double-colon notation in CSS3)
a
E:first-child
First child
b
E:first-of-type
First child of type
a,b
E:root
Root
a
E:not()
Negation
a

property, you can override this setting.
The
none
option turns off auto-sizing of text:
body { -webkit-text-size-adjust: none; }
Or, you can specify a specific multiplier:
body { -webkit-text-size-adjust: 140%; }
c04.indd 85c04.indd 85 12/7/07 2:45:24 PM12/7/07 2:45:24 PM
Chapter 4: Styling with CSS
86
Finally, you can set it to the default value of
auto
:
body { -webkit-text-size-adjust: auto; }
Figures 4-1 , 4-2 , and 4-3 show the results of these three options on the same page.
Figure 4-1: No text adjustment
Figure 4-2: Text is increased to 125%.
Figure 4-3: Text is adjusted based on width of the
content block.
For a normal Web site,
-webkit-text-size-adjust: auto
is recommended for improving
the readability of text. However, if you are developing an application, you will almost always want to
use
-webkit-text-size-adjust: none
to maintain precise control over the text sizing, particularly
when you go between portrait and landscape modes.
c04.indd 86c04.indd 86 12/7/07 2:45:25 PM12/7/07 2:45:25 PM
Chapter 4: Styling with CSS
87