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

CSS3 & iPhone
http://findmebyip.com/litmus/
Estelle Weyl
http://standardista.com
http://evotech.net/blog
@estellevw

http://findmebyip.com/litmus/

CSS2.1

CSS3
Unfinished, but well supported

iPhone = Safari
No 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

iPhonev. Desktop
Input file type does Not work
<a href=“tel:14155551212>Call me</a>
googlemaps, 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/358
http://graffletopia.com/stencils/392
http://glyphish.com/

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%; //Saf3.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://evotech.net/blog

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

http://www.evotech.net	43073
http://www.zhangxinxu.com	526
http://translate.googleusercontent.com	276
http://higher.com.ua	102
http://webcache.googleusercontent.com	87
http://www.css3html5.com	63
http://www.cssk8.com	50
http://onwebdev.blogspot.com	12
http://cache.baidu.com	6
http://tantrieuf31.blogspot.com	4
http://evotech.net	4
https://www.evotech.net	3
http://paper.li	3
http://www.imedu.org	2
https://twimg0-a.akamaihd.net	2
https://si0.twimg.com	2
http://static.slidesharecdn.com	2
http://anonymouse.org	1
http://a0.twimg.com	1
http://www.slideshare.net	1
http://news.baidu.com	1
http://www.google.es	1
http://feeds.feedburner.com	1
http://www.intersquash.com	1
http://www.xuwanting.com	1
http://blog.gabrieleromanato.com	1

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

by Estelle Weyl on Jul 27, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

26 Embeds 44,226

Statistics

iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development — Presentation Transcript