Chapter 8

Styling with CSS

WHAT YOU WILL LEARN IN THIS CHAPTER:

• Working with text styles and shadows
• Styling block elements
• Creating CSS buttons

Like its Mac and Windows cousins, the mobile version of Safari on IOS provides some of the best CSS support of all web browsers. As you develop IOS web applications, you can utilize CSS to make powerful user interfaces.

Safari provides support for much of CSS 2.1 as well as parts of CSS3. However, Safari also supports some properties technically called “experimental CSS3” that are not currently part of the W3C CSS standard; these properties will be supported by Apple going forward. (Hint: A -webkit- prefix is added to the names of these properties.) For a normal web app, most developers typically stay away from these experimental properties, or at least they don’t rely upon them for their application’s design. However, because you know that your app will be accessed exclusively by an IOS device, you can safely use these more advanced styles as you create your UI.

In this book, you’ve already been introduced to using CSS to create IOS interfaces. In this chapter I’m continuing that discussion and diving deeper into various CSS techniques.

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 select the exact elements within a DOM that you want to work with. If you have worked with CSS before, you are probably familiar with the standard type, class, and ID selectors. However, Safari provides selector support that includes many new selectors that are part of the CSS3 specification. Table 8-1 lists a set of CSS selectors that Safari provides support for, and Table 8-2 lists the set of pseudo-classes and pseudo-elements that Safari works with.

TABLE 8-1: Safari CSS Selectors

a New to CSS3

b Case-sensitive, even when unnecessary

TABLE 8-2: Safari Pseudo-Classes and Pseudo-Elements

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.

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

• :last-child
• :only-child
• nth-child()
• nth-last-child()
• last-of-type
• only-of-type
• :nth-of-type()
• :nth-last-of-type()
• Empty

TEXT STYLES

When you are styling text inside your IOS web apps, 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, Safari on IOS automatically sizes 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 multiplier:

body { -webkit-text-size-adjust: 140%; }

Figures 8-1 and 8-2 show the results of these two options on the same page.

Figure 8-1

Figure 8-2

Finally, you can set it to the default value of auto:

body { -webkit-text-size-adjust: auto; }

For a normal website, -webkit-text-size-adjust: auto is recommended for improving the readability of text. However, if you are developing an application, you almost always want to use -webkit-text-size-adjust: none to maintain precise control over the text sizing, particularly when you switch between portrait and landscape modes.

Handling Overflowed Text with text-overflow

Because the width of the viewport in Safari on iPhone is either 320 (portrait) or 480 (landscape) pixels (and Safari on iPad is 768 (portrait) or 1024 (landscape), 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 the 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 back button example shown in Figure 8-3. Because there is not enough space to display the text iProspector, only iProspect is shown.

Figure 8-3

Therefore, to prevent this situation from happening, you should provide a visual hint that the text has been clipped. Fortunately, the text-overflow property enables developers to specify what they want 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;

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

Figure 8-4

The text-overflow property is particularly useful for web apps that target the iPhone because a heading that displays fully in landscape mode may need to be clipped in the much thinner portrait mode. iPad apps will probably not experience this problem, unless you have a really, really long title.

TRY IT OUT: Creating Ellipsis Text

To demonstrate how to work with an ellipsis in text, follow these steps.

1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch8-Ex1.html.

<html>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0;">
<body>
<div> 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> 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> 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>

Code snippet BIDHJ-Ch8-Ex1.html

2. Add the following style section to the document head:

<style>
.ellipsis
{
    text-overflow: ellipsis;
    width: 200px;
    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>

Code snippet BIDHJ-Ch8-Ex1.html

3. Add a class attribute to each of the three div elements, associating each with a corresponding style.

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

Code snippet BIDHJ-Ch8-Ex1.html

4. Save your document.

5. View it on your iPhone or iPod touch, as shown in Figure 8-5.

Figure 8-5

How It Works

This example demonstrates the fact that text-overflow may require specifying additional CSS properties to display as intended. In this case, it needs to have overflow or white-space properties set to ensure that the text-overflow property works.

Creating Subtle Shadows with text-shadow

In the IOS 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: color offsetX offsetY blurRadius;

The first value is the color of the shadow. The next two give the shadow’s offset position — the second value is 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 following example, a gray shadow is added 1 pixel above the element’s text with no blur:

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

However, text shadows can be a distraction and look tacky if they are too noticeable. Therefore, you can use an rgba (red, green, blue, alpha) color value 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, and 1.0 is fully opaque) that is positioned 1 pixel under the element’s text:

text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;

STYLING BLOCK ELEMENTS

There are several styles that you can apply to block elements to transform their appearance that go beyond ordinary CSS styles that you may have used on traditional websites. 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.

You can optionally specify one or two keywords 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 you use stretch 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. You can also use round , which is far less common for IOS use, as the first keyword. When this setting is present, 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 is implied.

When rendered, Safari looks at the -webkit-border-image property and divides the image based on the four numbers specified.

The -webkit-border-image property plays an important role in creating CSS-based IOS buttons, which is explained later in this chapter.

Rounded Corners with -webkit-border-radius

The -webkit-border-radius is used to specify the radius of the corners of an element. Using this property, you can easily create rounded corners on your elements rather than resorting to image-based corners. For example:

-webkit-border-radius: 10px;

This declaration specifies a 10 pixel radius for the element, which is the standard radius value for the Rounded Rectangle design for destination pages. You can also specify the radius of each individual corner using the following properties:

-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

If, for example, you want to create a div with rounded top corners and square bottom corners, the style code looks like the following:

div.roundedTopBox
{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}

Results are shown in the text box in Figure 8-6.

Figure 8-6

Gradient Push Buttons with -webkit-appearance

The -webkit-appearance property is designed to transform the appearance of an element into a variety of different controls. Safari on IOS supports just two of the possible values: push-button and button. But it is the push-button that holds the most promise for IOS web app developers. Suppose, for example, you would like to turn a link element into a gradient push button. You could do it with an image, but -webkit-appearance: push-button enables you to do it entirely within CSS. To demonstrate, begin with a link assigned to a class named special:

<a href="tel:202-558-1212" class="special">Call Headquarters</a>

Then, define the a.special style:

a.special
{
     display: block;
     width: 246px;
     font-family: Helvetica;
     font-size: 20px;
     font-weight: bold;
     color: #000000;
     text-decoration: none;
     text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
     text-align: center;
     line-height: 36px;
     margin: 15px auto;
     -webkit-border-radius:10px;
     -webkit-appearance: push-button;
}

The display:block and width:246px properties give the link a wide rectangular block shape. The -webkit-appearance: push-button property transforms the appearance to have a gradient gray push button look. The -webkit-border-radius rounds the edges using the standard 10px value. Although the shape of the push button is now set, the text needs to be tweaked using not just standard text formatting properties, but also a line-height property of 36px, which vertically centers the 20px text in the middle of the push button. If you add a simple background-color: #999999 style to the body tag, then you get the result shown in Figure 8-7.

Figure 8-7

Multiple Background Images

In earlier versions of CSS, there was always a 1:1 correspondence between an element and a background image. Although that capability worked for most purposes, some page designs could not work effectively with a single background image defined. So, in order to get around the 1:1 limitation, designers would resort to adding extra div tags here or there just to achieve the intended visual design.

CSS3 addresses this issue by giving you the ability to define multiple background images for a given element. Most browsers don’t support this feature yet, but fortunately for IOS web app developers, Safari on IOS does.

You define a set of background images by listing them in order after the background property name declaration. Images are rendered with the first one declared on top, the second image behind the first, and so on. You can also specify the background-repeat and background-position values for each of the images. If background-color is defined then this color is painted below all of the images. For example:

div.banner
{
background: url(header_top.png) top left no-repeat,
     url(banner_main.png) top 6px no-repeat,
     url(header_bottom.png) bottom left no-repeat,
     url(middle.png) left repeat-y;
}

In this code, the header_top.png serves as the background image aligned to the top left portion of the div element. The banner_main.png is positioned 6px from the top, and the header_bottom.png image is positioned at the bottom of the div. Finally, the middle.png is treated as a repeating background.

SETTING TRANSPARENCIES

Developers have long used rgb to specify an RGB color value for text and backgrounds. CSS3 adds the ability to set an alpha value when specifying an RGB color with the new rgba declaration. Using the rgba declaration, you can add translucent color overlays without transparent PNGs or GIFs. The syntax is the following:

rgba(r, g, b, alpha)

The r, g, and b values are integers between 0 and 255 that represent the red, green, and blue values; alpha is a value between 0 and 1 (0.0 is fully transparent, and 1.0 is fully opaque). For example, to set a red background with a 50% transparency, you would use:

background: rgba(255, 0, 0, 0.5);

Keep in mind that the alpha value in the rgba declaration is not the same as the opacity property. rgba sets the opacity value only for the current element, whereas opacity sets the value for the element and its descendants.

The following example shows five div elements, each with a different alpha value for the black background:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RGBA Declaration</title>
<meta name="viewport" content="width=320; initial-scale=1.0;
     maximum-scale=1.0; user-scalable=0;">
<style type="text/css" media="screen">
div.colorBlock {
     width: 50px;
     height: 50px;
     float: left;
     margin-bottom: 10px;
     font-family: Helvetica;
     font-size: 20px;
     text-align:center;
     color:white;
     text-shadow: rgba(0,0, 0, 0.7) 0 1px 0;
     line-height: 46px;
}
</style>
</head>
<body>
<div style="margin: 10px 0 0 30px;">
<div class="colorBlock" style="background: rgba(0, 0, 0, 0.2);"><span
>20%</span></div>
<div class="colorBlock" style="background: rgba(0, 0, 0,
0.4);"><span>40%</span></div>
<div class="colorBlock" style="background: rgba(0, 0, 0,
0.6);"><span>60%</span></div>
<div class="colorBlock" style="background: rgba(0, 0, 0,
0.8);"><span>80%</span></div>
<div class="colorBlock" style="background: rgba(0, 0, 0,  1.0)
;"><span>100%</span></div>
</div>
</body>
</html>

Code snippet BIDHJ-Ch8-Ex2.html

Figure 8-8 shows the page.

Figure 8-8

CREATING CSS-BASED IOS BUTTONS

Using -webkit-border-image, you can create buttons that closely emulate Apple’s standard button design. This technique, inspired by developer Matthew Krivanek, involves using a pill-shaped button image (available for download at www.wrox.com) and stretching the middle of the button image, but ensuring that the left and right sides of the button are not distorted in the process.

TRY IT OUT: Using CSS to Create an IOS Button

1. Create the following empty HTML document in your text editor and then save the document as BIDHJ-Ch8-Ex3.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic Button/title>
<meta name="viewport" content="width=320; initial-scale=1.0;
     maximum-scale=1.0; user-scalable=0;">
</head>
<body>
<a href="mailto:[email protected]" class="fullSizedButton">Send to Client</a>
</body>
</html>

Code snippet BIDHJ-Ch8-Ex3.html

2. Add the following <style> element to your document head:

<style type="text/css" media="screen">
a.fullSizedButton
{
     font-family: Helvetica;
     font-size: 20px;
     display: block;
     width: 246px;
     margin: 15px auto;
     text-align:center;
     text-decoration: none;
     line-height: 46px;
     font-weight: bold;
     color: #000000;
     text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
     border-width: 0 14px 0 14px;
     -webkit-border-image: url(images/whiteButton.png) 0 14 0 14;
}
body
{
     background-color: black;
}
</style>

Code snippet BIDHJ-Ch8-Ex3.html

3. Add an <a>link with a fullSizedButton class:

<a href="mailto:[email protected]" class="fullSizedButton">Send to Client</a>

4. Save your document.

5. View it on your iPhone or iPod touch.

How It Works

In this example, the display property is set to block and the width is set to 246px, the width of the buttons used by Apple. The line-height is set to 46px, which gives the block element the standard height and vertically centers the button text. A border-width property sets the left and right borders to 14px and eliminates the borders for the top and bottom by defining their values as 0.

Now that everything else is set up, look at the -webkit-border-image property definition. In this example, 0 pixels are used from whiteButton.png on the top and bottom. However, the first 14 pixels of the image are used for the left border of the element, whereas the 14 rightmost pixels are used for the right border. Because the whiteButton.png image is 29 pixels in width, a 1-pixel section is used as the middle section. This middle section is then repeated over and over to fill the width of the element. Figure 8-9 shows how -webkit-border-image divides the image.

Figure 8-9

Figure 8-10 shows the button when rendered by Safari on IOS.

Figure 8-10

IDENTIFYING INCOMPATIBILITIES

Although Safari on IOS is closely related to its Mac and Windows counterparts, it is not identical in terms of CSS support. The latest versions of Safari on Mac and Windows support most of the newer CSS3 and experimental properties (prefixed with -webkit-). Safari for iPhone, however, provides limited support of several properties.

The following CSS properties are not supported (or have limited support) in Safari on IOS:

• box-shadow
• -webkit-box-shadow
• text-stroke
• -webkit-text-stroke
• text-fill-color
• -webkit-text-fill-color
• -website-appearance (push-button supported, but no other values are)

• WHAT YOU LEARNED IN THIS CHAPTER