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

Mobile Safari provides support for several of the more advanced -webkit- styles that are not part of the W3C CSS standard.. Pseudo-Class/ Pseudo-Element DefinitionCSS3a Text Styles Wh

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 Suppor ted 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()

❑ only-of-type

❑ :nth-of-type()

❑ :nth-last-of-type()

❑ empty

Table 4-1: Mobile Safari CSS Selectors

Table 4-2: Mobile Safari Pseudo-Classes and Pseudo-Elements

CSS3)a

CSS3)a

Pseudo-Class/ Pseudo-Element Definition

CSS3)a

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%; }

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

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:

Figure 4-4: Text is clipped if it does not fit into available space

Now, when text overflows, an ellipsis is added, as shown in Figure 4-5

The text-overflow property is particularly useful for iPhone and iPod touch because a heading that

displays fully in landscape mode may need to be clipped in the much thinner portrait mode

The use of text-overflow may require specifying additional CSS properties to display as intended The

following code, for example, needs to have overflow or white-space properties set to ensure that the

<html>

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0;">

<style>

.ellipsis {

text-overflow: ellipsis;

width: 200px;

Figure 4-5: Ellipsis provides a visual indicator that the text has been clipped

white-space: nowrap;

overflow: hidden;

} ellipsisBroken1 { text-overflow: ellipsis;

width: 200px;

/* white-space: nowrap; */

overflow: hidden;

} ellipsisBroken2 { text-overflow: ellipsis;

width: 200px;

white-space: nowrap;

/* overflow: hidden; */

}

</style>

<body>

<div class="ellipsis"> this is a test this is a test this is a test this is a test this is a test this is a testthis is a test </div>

<br><br>

<div class="ellipsisBroken1"> this is a test this is a test this is a test this is a test this is a test this is a testthis is a test </div>

<br><br>

<div class="ellipsisBroken2"> this is a test this is a test this is a test this is a test this is a test this is a testthis is a test </div>

</body>

</html>

Subtle Shadows with text-shadow

In the iPhone UI, Apple makes subtle use of text shadows, particularly on buttons and larger heading text In addition to aesthetics, text shadows are also useful in making text more readable by increasing its contrast with the background

You can add drop shadows to your text through the text-shadow property The basic declaration is as follows:

text-shadow: #666666 0px -1px 0;

The first value is the color of the shadow The next two give the shadow’s offset position — the second

value being the x -coordinate and the third is the y -coordinate (Negative values move the shadow left

and up.) The fourth parameter indicates the shadow’s Gaussian blur radius So, in the preceding example, a gray shadow is added 1px above the element’s text with no blur

However, text shadows can be a distraction and look tacky if they are too noticeable Therefore, an rgba (red, green, blue, alpha) color value can be used in place of a solid color value in order to define the transparency value of the shadow (See the “Setting Transparencies” section later in this chapter.) Therefore, the following declaration defines a white shadow with a 7 alpha value (0.0 is fully transparent, while 1.0 is fully opaque) that is positioned 1 pixel under the element’s text:

Figures 4-6 and 4-7 show the subtle difference of adding a text shadow

Styling Block Elements

There are several styles that you can apply to block elements to transform their appearance that go

beyond the typical CSS2 styles These include three so-called experimental properties (

-webkit-border-image , -webkit-border-radius , and -webkit-appearance ) and a CSS3 enhancement of the

background property These are described in this section

Image-Based Borders with -webkit-border-image

The -webkit-border-image property enables you to use an image to specify the border rather than the

border-style properties The image appears behind the content of the element, but on top of the

background For example:

-webkit-border-image: url(image.png) 7 7 7 7;

The four numbers that follow the image URL represent the number of pixels in the image that should be

used as the border The first number indicates the height of the top (both the corners and edge) of the

image used Per CSS conventions, the remaining three numbers indicate the right, bottom, and left sides

Pixel is the default unit, though you can specify percentages

If the image URL you provide cannot be located or the style is set to none , then border-style

properties are used instead

One or two keywords can be optionally specified at the end of the declaration These determine how the

images for the sides and the middle are scaled and tiled The valid keywords are stretch or round If

stretch is used as the first keyword, the top, middle, and bottom parts of the image are scaled to the

same width as the element's padding box Far less common for iPhone use, round can also be used as

the first keyword When used, the top, middle, and bottom images are reduced in width so that a whole

number of the images fit in the width of the padding box The second keyword acts on the height of the

left, middle, and right images If both keywords are omitted, then stretch stretch is implied

When rendered, the Mobile Safari browser looks at the -webkit-border-image property and divides

up the image based on the four numbers specified

The -webkit-border-image property plays an important role in creating CSS-based iPhone buttons,

which is explained later in this chapter

Figure 4-6: No text shadow defined Figure 4-7: Text shadow defined