Make the most of the iPhone SDK

WebKit and CSS

1. Native Controls

A feature unique to the later versions of WebKit is the ability to style form controls. For a long time, the form inputs were kept as the operating system’s native controls, but now they are specifically styled that way. This means, we can easily over-ride that styling, or make elements appear like native controls.

Take a look at these text inputs:

If you’re running a WebKit-based browser like Safari, you’ll see the first text input as a normal OS X-style control, but the second one is a rounded control (like the search input minus the cancel widget).

Now look at these anchors:

Both are <a> tags, but the second one appears as a push-button in Safari.

That’s not all. Here are two button inputs:

Notice how the second button is a square button?

Have I caught your interest? Here’s how you do it.

Mimic native widgets / controls

Elements are styled to look like native controls for WebKit-based browsers using the -webkit-appearance CSS property. Some of the values this can take are (in two columns if you’re on WebKit):

Setting -webkit-appearance simply makes the element appear as if it were the control. This could be of enormous use within WebViews inside Cocoa applications or with web apps for the iPhone.

If don’t have access to a WebKit-based browser, here’s a screenshot of what some of the “controls” look like:

The important thing to note is that although the controls can be made to look like other controls using -webkit-appearance, their function is not affected. That is, textboxes will still accept text when they’re made to appear like push-button and so on.

2. Element Drag

Apparently dragging doesn’t work with the iPhone, as it’s used for scrolling. That’s to be expected, I guess.

Generally there is a lot of javascript involved in making an element draggable. Now you can achieve the same thing with only one line of CSS. Javascript will still be required to have drop targets, etc. but this allows the user to drag the entire element rather than just text or an image.

Try dragging this element (from the side):

Notice how the whole element is dragged? It’s just a regular div (made to act as a push-button) with the CSS rule -webkit-user-drag:element applied to it. Easy!

3. Edit the webpage

Doesn’t work on the iPhone. You can click in the element, but the keyboard doesn’t show up. This is likely to work when there are copy-paste functions in the phone.

This is a paragraph that you can edit if you’re running a WebKit-based browser like Safari or the iPhone. Just click here and edit the text like a normal textbox.

To allow users to edit elements of the page (or all of it) in real time, there exists a property -webkit-user-modify. Obviously this defaults to read-only, but you can set it to the following:

• read-only
• read-write
• read-write-plaintext-only

read-write allows the user to copy and paste in rich text with formatting, while read-write-plaintext-only pastes in only the text. This could be useful with debugging or as part of a WYSIWYG editor, etc. Just be careful with the security side of things.

4. Selection (Highlighting)

I am a paragraph that you can’t select (if you’re running Safari). Try and highlight me and realize that your attempts are futile. Bwah, ha ha…

To disallow selection (highlighting) of text for a particular element, set the CSS rule -webkit-user-select:ignore. This may be useful for many web apps, but use it sparingly to avoid irritating the user.

I am a paragraph that you can select. If your browser supports the `::selection` selector, highlighting this will result in a black background and white text for the highlighted region.

5. Rounded corners

Rounded corners: Look, no hacks!

-webkit-border-radius specifies the radius of the corners. You can specify certain corners only by using one of

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

For example, the following has the top-right and bottom-left corners set to a radius of 7px:

A bit of fancy corner-work

Elliptical corners are possible by specifying two values, eg. -webkit-border-radius: 3px 7px;.

6. Shadows

text-shadow

This text has a shadow when viewed with a compliant browser.

For the text-shadow CSS property, the parameters are

1. horizontal offset (negative is to the left)
2. vertical offset (negative is up)
3. blur radius (higher is more blurred)
4. shadow color

For example, using text-shadow: 1px 1px 7px #000; we get:

this excellent text with a blurred, but visible shadow.

box-shadow

This entire element has a shadow using -webkit-box-shadow:

To add a shadow to the actual element rather than just the text, use -webkit-box-shadow. Parameters are the same as for the text-shadow property.

1. the horizontal offset
2. the vertical offset
3. the blur radius
4. shadow color

The shadow automatically compensates for any rounded corners you may have added.

This element has a shadow, but also a border-radius.

text-stroke

I guess I’m really just a string of text. Oh, I’m stroked.

Use -webkit-text-stroke to set a border or stroke around the text. Specify thickness and color.

To change the fill color, use -webkit-text-fill-color; otherwise value for the color property is used.

7. Backgrounds

WebKit allows multiple background images using CSS. If you’re running Safari or other WebKit-based browser, see this great example of multiple background images with CSS.

The syntax for multiple backgrounds:

  background-image:    url("first-img"), url("second-img"),
                       url("other-img"), url("another-img");
  background-repeat:   no-repeat, no-repeat,
                       repeat-y, repeat-x;
  background-position: top left, top right,
                       left, top;

The first image is associated with the first background-repeat, and the first background-position value and so on. The order in which the images appear also determines the stacking order - earlier images are stacked higher.

Shorthand background notation also works, the example above is equivalent to:

background: url("first-img") top left no-repeat,
            url("second-img") top right no-repeat,
            url("other-img") left repeat-y,
            url("another-img") top repeat-x;

This could be really handy with making the background of a web-app, such as for the iPhone, without the need for multiple nested elements.

8. Border Image

To set fancy borders, you often need to use images. However, you can do away with all the javascript and CSS hacks and use -webkit-border-image.

Syntax:

-webkit-border-image: url("image-url") size fit fit;

“image-url” needs to be an image divided into nine parts for each corner and edge and the content. The size is the height / width of the squares that the image is divided into. Fit can be round or stretch, which are ways of fitting the image into the border. To show the border, you need to actually have a border rule, but that can be integrated into the border-image by using something like:

-webkit-border-image: url("image-url") 27 / 27px round round;

The / 27px bit specifies the width of the border and makes it show if it isn’t already.

9. Resizing

This element is actually resizable.
If you’re using a compatible browser, drag the handle at the bottom right to resize this box.
Max-width is restricted to 100%.

Making an element resizable is really easy: just set the resize property to vertical, horizontal or both.

This box can only be resized horizontally (along the x-axis)

To make scrollbars appear when the content doesn’t fit completely inside the box, it’s a good idea to set overflow:auto;.

Restrict the size that an element can be resized to by setting min-width, min-height, max-width and / or max-height.

10. Colors and Opacity

I am a-hued, a-saturated, and a-alpha-ed.

Colors can be set using rgb(red, green, blue), rgba(red, green, blue, alpha), hsl(hue, saturation, lightness) or hsla(hue, saturation, lightness, alpha).

The example above has the rule background-color: hsla(100,90%,50%,0.6);.

---

Set opacity as a number between 0 (completely transparent) and 1 (completely opaque). If you don’t want the opacity to be inherited by child elements, set the background color using rgba or hsla and specify the alpha value there.

Further reading:

• http://qooxdoo.org/documentation/general/webkit_css_styles
• http://www.css3.info
• http://andybudd.com/presentations/css3