Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

106,697 views

Published on

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!

Published in: Technology

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

  1. 1. CSS3 & iPhone<br />http://findmebyip.com/litmus/<br />Estelle Weyl<br />http://standardista.com<br />http://evotech.net/blog<br />@estellevw<br />
  2. 2. http://findmebyip.com/litmus/<br />
  3. 3. CSS2.1<br />
  4. 4. CSS3<br />Unfinished, but well supported<br />
  5. 5. iPhone = Safari<br />No need to do any Cross browser testing!!!<br />
  6. 6. CSS3<br />Safari Supports all of CSS3<br />Safari Supports HTML5<br />almost<br />^<br />much of<br />^<br />
  7. 7. CSS3 Features<br />CSS3 Selectors<br />Text Shadow (2.0)<br />Box Shadow (prefixed)<br />Rounded Corners (prefixed)<br />@font-face<br />Colors & Alpha Transparency (hsla, rgba)<br />Opacity<br />Multiple background images<br />
  8. 8. CSS3 Features<br />Text-overflow<br />Gradients<br />Transforms<br />Background size<br />Multi-column layout<br />Animations<br />Transitions<br />Border-image<br />Reflections<br />
  9. 9. HTML5<br />databases<br />Storage<br />Offline Applications<br />GeoLocation<br /><canvas>, <svg>, <audio>, <video><br />Web Forms…<br />
  10. 10. HTML5 Template<br /><!DOCTYPE html><html><head><meta charset="UTF-8"/><title>Remember this!!</title></head><body></body></html><br />
  11. 11. HTML5 Input Types<br />date /time / datetime / datetime-local / month / week<br />email <br />url<br />tel<br />number <br />range <br />search<br />
  12. 12. iPhone Input Behavior<br />
  13. 13. iPhonev. Desktop<br />Input file type does Not work<br /><a href=“tel:14155551212>Call me</a><br />googlemaps, iTunes and Youtube links open widgets<br />mailto: opens mail application<br />view source debugger<br />✔<br />
  14. 14. Firebug for iPhone???<br />Settings > Safari > Developer > Debug Console<br />
  15. 15. Firebug for Safari?<br />Switch user agent to iPhone<br />Use Web Inspector to debug<br />
  16. 16. iPhone Simulator<br />
  17. 17. And for Windows?<br />And for Windows?<br />
  18. 18. Beautiful bookmarks<br /><link rel="apple-touch-icon" href="/iphoneicon.png" /><br />apple-touch-icon.png<br />
  19. 19. Targeting the Phone<br />Viewport:<br /><meta name="viewport" content="width=980”/><br /><meta name="viewport" content="width=device-width”/><br /><meta name="viewport" <br /> content="user-scalable=no, width=device-width"/><br />Prohibit Zoom / Pinch:<br /><meta name="viewport" content="width=device-width, <br /> minimum-scale=1.0, maximum-scale=1.0" /> <br />
  20. 20. Targeting the Phone<br />@media screen and (max-device-width: 480px){ <br /> /* iPhone CSS here */ <br />} <br />
  21. 21. Hide the Title bar<br /><script><br />addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);<br /> function hideURLbar(){ window.scrollTo(0,1); }<br />}<br /></script><br />
  22. 22. Don’t reinvent the wheel<br />
  23. 23. Sencha Touch<br />
  24. 24. http://graffletopia.com/stencils/358<br />http://graffletopia.com/stencils/392<br />http://glyphish.com/<br />
  25. 25.
  26. 26.
  27. 27.
  28. 28.
  29. 29. http://www.westciv.com/tools/gradients/<br />
  30. 30.
  31. 31.
  32. 32. h1 {<br /> white-space: nowrap;<br /> width: 180px; <br /> overflow: hidden;<br /> -o-text-overflow: ellipsis;<br />text-overflow: ellipsis;<br />}<br />
  33. 33.
  34. 34.
  35. 35.
  36. 36. foo{<br /> background-image: url(foo.png); <br /> -moz-background-size: 100% 50%; //FF3.6 <br /> -o-background-size: 100% 50%; //O 9.5<br /> -webkit-background-size: 100% 50%; //Saf3.0             <br /> background-size: 100% 50%;<br />} <br />
  37. 37.
  38. 38.
  39. 39.
  40. 40.
  41. 41. CSS3 Selectors<br />:nth-of-type()<br />tr:nth-of-type(even) td{<br /> background-color: #dedede;<br />}<br />
  42. 42. Thanks.<br />Estelle Weyl<br />Twitter: @estellevw<br />Blog: http://www.standardista.com<br />http://evotech.net/blog<br />
  43. 43. Prizes<br />Copy of my Book - Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKithttp://apress.com/book/view/9781430230069<br />

×