View
115
Download
2
Category
Tags:
Preview:
DESCRIPTION
Wouldn't it be cool to be able to use CSS3 and HTML5 unfettered by the lack of support in IE? Mobile developers for smart phones get to do just that!When developing for iPhones, iPods, iPads and Android devices—mobile devices using webkit browsers—we can use CSS animations, transforms, multiple background images, rounded corners, text and box shadows, CSS columns, and HTML5 form elements.In this session we'll use some CSS3 features learned in earlier session to create a native looking iPhone web app. We'll also cover some CSS UI and HTML5 form elements that will help you get up to speed on developing for mobile webkit. You don't have to wait any longer to use CSS3!
Citation preview
Estelle Weylhttp://standardista.comhttp://evotech.net/blog
@estellevw
CSS3 & iPhone
htt
p:/
/findm
eb
yip
.com
/lit
mu
s/
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
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://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://evotech.net/blog
Prizes
Copy of my Book - Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKithttp://apress.com/book/view/9781430230069
Recommended