Download - iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development

Estelle Weylhttp://standardista.comhttp://evotech.net/blog

@estellevw

CSS3 & iPhone

htt

p:/

/findm

eb

yip

.com

/lit

mu

s/

http://standardista.com/

http://evotech.net/blog

http://fi

ndmebyip.com/litmus/

CSS2.1

CSS3Unfinished, but well supported

iPhone = SafariNo need to do any Cross browser testing!!!

CSS3

Safari Supports all of CSS3

Safari Supports HTML5

almost

^

^much of

CSS3 Features CSS3 Selectors

Text Shadow (2.0)

Box Shadow (prefixed)

Rounded Corners (prefixed)

@font-face

Colors & Alpha Transparency (hsla, rgba)

Opacity

Multiple background images

CSS3 Features Text-overflow

Gradients

Transforms

Background size

Multi-column layout

Animations

Transitions

Border-image

Reflections

HTML5

databases

Storage

Offline Applications

GeoLocation

<canvas>, <svg>, <audio>, <video>

Web Forms…

HTML5 Template

<!DOCTYPE html><html><head><meta charset="UTF-8"/><title>Remember this!!</title></head><body></body></html>

HTML5 Input Types

date /time / datetime / datetime-local / month / week

email

url

tel

number

range

search

iPhone Input Behavior

iPhone v. Desktop

Input file type does Not work

<a href=“tel:14155551212>Call me</a>

google maps, iTunes and Youtube links open widgets

mailto: opens mail application

view source debugger ✔

Firebug for iPhone???

Settings > Safari > Developer > Debug Console

Firebug for Safari?

Switch user agent to iPhone

Use Web Inspector to debug

iPhone Simulator

And for Windows?

And for Windows?

Beautiful bookmarks

<link rel="apple-touch-icon" href="/iphoneicon.png" />apple-touch-icon.png

Targeting the Phone

Viewport:<meta name="viewport" content="width=980”/><meta name="viewport" content="width=device-width”/><meta name="viewport" content="user-scalable=no, width=device-width"/>

Prohibit Zoom / Pinch:<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Targeting the Phone

@media screen and (max-device-width: 480px){ /* iPhone CSS here */ }

Hide the Title bar

<script>

addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

function hideURLbar(){ window.scrollTo(0,1);

}

}

</script>

Don’t reinvent the wheel

Sencha Touch

http://graffletopia.com/stencils/358http://graffletopia.com/stencils/392

http://glyphish.com/

http://graffletopia.com/stencils/358






http://www.westciv.com/tools/gradients/

h1 { white-space: nowrap; width: 180px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; }

foo {

background-image: url(foo.png);

-moz-background-size: 100% 50%; //FF3.6

-o-background-size: 100% 50%; //O 9.5

-webkit-background-size: 100% 50%; //Saf 3.0

background-size: 100% 50%;

}

CSS3 Selectors

:nth-of-type()

tr:nth-of-type(even) td{ background-color: #dedede;}

Thanks.

Estelle Weyl

Twitter: @estellevw

Blog: http://www.standardista.com


http://www.standardista.com/


Prizes

Copy of my Book - Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKithttp://apress.com/book/view/9781430230069

http://apress.com/book/view/9781430230069

http://apress.com/book/view/9781430230069