Date post: | 28-Jan-2015 |
Category: |
Technology |
Upload: | estelle-weyl |
View: | 115 times |
Download: | 2 times |
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