CSS

From IPhone Developers' Wiki

More info:

• http://qooxdoo.org/documentation/general/webkit_css_styles
• http://dev.lipidity.com/apple/iphone-webkit-css-3
• http://westciv.com/iphonetests/

Contents 1 Scaling images for the phone 2 iPhone UI Elements 3 CSS 3+ (Webkit Specific) 3.1 -webkit-border-radius 3.2 -webkit-border-image 3.3 text-shadow 3.4 color: transparent 3.5 color: rgba(#,#,#,#) 3.6 background-color: rgba(#,#,#,#) 3.7 CSS type Selectors 3.8 -webkit-appearance 4 CSS oddities 4.1 overflow: auto 5 CSS that doesn't work 5.1 position: fixed 5.2 -webkit-box-shadow 6 Other CSS notes 7 Supported Fonts

[edit] Scaling images for the phone

img {

   max-width: 280px;
   height: auto;

}

[edit] iPhone UI Elements

Media:UIElements.zip

[edit] CSS 3+ (Webkit Specific)

[edit] -webkit-border-radius

-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

[edit] -webkit-border-image

-webkit-border-image lets you use a single image to specify the corners and side images used to draw the border around an item. You can use this to generate nice buttons. If you use a PNG with alpha channel, with a colorless glossy transparent image, you can add button-like gloss to almost any DIV, and set its color with the background-color. Note that this doesn't seem to work if you specify the numbers in the -webkit-border-image as "7px 7px 7px 7px".

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

[edit] text-shadow

You can generate drop shadows under text using the text-shadow attribute. The first two numbers are the offset of the shadow, to the right and down respectively. Negative values will be left and up. The third number is the radius of the gaussian blur to use. The last argument is the color that is blurred to make the shadow.

text-shadow: 2px 2px 7px black;

[edit] color: transparent

[edit] color: rgba(#,#,#,#)

[edit] background-color: rgba(#,#,#,#)

This allows you to set an alpha value for the color specified for text or backgrounds which allows translucent color overlays without resorting to transparent PNGs.

[edit] CSS type Selectors

Quite useful for selecting checkboxes and radio buttons and text fields which are all an input element:

input[type=checkbox] {
 background-color: red;
}
input[type=radio] {
 background-color: green;
}
input[type=text] {
 background-color: blue;
}

[edit] -webkit-appearance

values:

• push-button (gradient rounded corners)
• button (square no gradient)
• bevel-button (gradient rounded corners)
• button-bevel (rounded corners no gradient)

[edit] CSS oddities

[edit] overflow: auto

If you set it to overflow: auto, the user can scroll the div with 2 fingers (like on a macbook track pad), but this is not bounce scroll and is not intuitive.

[edit] CSS that doesn't work

[edit] position: fixed

[edit] -webkit-box-shadow

[edit] Other CSS notes

in certain cases there is a minimum font size of 15px (not sure what they are, but during development, we definitely saw that we couldn't make the font size of something smaller than 15px. Could be a restriction of header tags?)

[edit] Supported Fonts

Note that Impact is absent, even though it is supposed to be a web-safe font and even comes up in the Web category by default in Tiger.

• American Typewriter (no italics)
• Arial
• Arial Rounded MT Bold (no italics)
• Courier
• Georgia
• Helvetica (default sans-serif)
• Marker Felt
• Times New Roman (default serif, also overall default)
• Trebuchet MS
• Verdana
• Zapfino