Tài liệu Lập trình iphone chuyên nghiệp part 6 docx

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

❑

nth-child()

❑

nth-last-child()

❑

last-of-type

❑

only-of-type

❑

:nth-of-type()

❑

:nth-last-of-type()

❑

empty

c04.indd 83c04.indd 83 12/7/07 2:45:23 PM12/7/07 2:45:23 PM
Chapter 4: Styling with CSS

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

E[attr^=val]
attr value begins with val
a,b
E[attr$=val]
attr value ends with val
a,b
E[attr*=val]
attr value contains at least one instance of val
a,b
a
New to CSS3
b
Case sensitive, even when unnecessary
Table 4-2: Mobile Safari Pseudo-Classes and Pseudo-Elements
Pseudo-Class/ Pseudo-Element Definition
E:link
Unvisited link
E:visited
Visited link
E:lang([Code])
Selector content uses the language code specified
E:before
Content before an element
E::before
Content before an element (new double-colon notation in
CSS3)
a
E:after
Content after an element
E::after

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

E:target
Target
a
E:enabled
Enabled state
a
E:disabled
Disabled state
a
E:checked
Checked state
a
a
New to CSS3
b
When new first child/child of type is created programmatically using JavaScript, the previous maintains the :first-child or
:first-of-type attributes.
Text Styles
When you are styling text inside your iPhone and iPod touch applications, keep in mind three
text-related styles that are important to effective UI design:
-webkit-text-size-adjust
,
text-overflow
, and
text-shadow
. These properties are explained in this section.
Controlling Text Sizing with -webkit-text-size-adjust
When a page is rendered, Mobile Safari will automatically size the page's text based on the width of the
text block. However, by using the
-webkit-text-size-adjust

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

Handling Overflowed Text with text-overflow
Because the width of the viewport in Mobile Safari is either 320 (portrait) or 480 (landscape) pixels,
effectively managing the physical length of dynamic text on UI elements can be tricky. This is
particularly important for headings or button text in which a fixed amount of real estate is available.
The best example of the need to handle text overflow is in the top toolbar that is a standard part of
iPhone application interface. By default, any content that does not fit inside of the container box of the
element is clipped, which can potentially lead to confusion, such as the example shown in Figure 4-4 .
Therefore, to prevent this situation from happening, you will want to provide a visual hint that the text
has been clipped. Fortunately, the
text-overflow
property enables developers to specify what they
wish to have done when the text runs on. The two values are
ellipsis
and
clip
. The
ellipsis
value
trims the content and adds an ellipsis character (. . .) to the end. Suppose you assign the following
property to the toolbar’s button and heading element:
text-overflow: ellipsis;
Figure 4-4: Text is clipped if it does not fit into available
space.
c04.indd 87c04.indd 87 12/7/07 2:45:25 PM12/7/07 2:45:25 PM