Thursday, February 21, 2008 @ 2:53 AM

One of the biggest benefits of designing Web applications specifically for the iPhone is that you have access to many Web Kit CSS properties that have not yet been supported in today's other popular browsers, including Firefox.

Things like:

• Borders with rounded corners
• Image borders
• Box shadows
• Multiple background images

If you've ever used Google's iUI, a user interface library for Safari development on the iPhone (originally developed by Joe Hewitt), you may be using image borders and not even be aware of it. In today's post I'll explain how we'll take advantage of image borders in our crossword puzzle game.

The buttons used in iUI all rely on image borders. Image borders make it easy to create scalable image-based buttons (with rounded corners and all types of other snazzy eye candy). Accomplishing something like this previously required 4+ nested elements (plus 4+ images) each responsible for the rendering a specific corner of the button. Now you need only one element and one image and two CSS attributes.

Here's the CSS:

.button {
    border-width: 0 5px;
    -webkit-border-image: url(toolButton.png) 0 5 0 5;
    }

When using -webkit-border-image you first specify the image to use, then set the areas that will act as your borders. In the example above, we're only going to scale the asset horizontally, so we'll only need a border of 5 pixels on the left and right. The top and bottom do not require a border.

Click Me

For more information on image borders check out Apple's Safari CSS Reference: Supported CSS Properties.

In the crossword puzzle game we'll use an image border to highlight the currently selected squares in the puzzle grid. Here's what it will look like:

Using an image border is convienent because we can scale the border horizontally and vertically based on the length of the word we're working with. After entering my answer, in this case "CAL," the letters would appear in the highlighted area on the grid.

// Ryan Jennings

Labels: crossword, css, game, how to, iphone development, iui, javascript, web kit