Doing More with LESS for CSS
Seu SlideShare está sendo baixado.
×
Confira estes a seguir
Mais Conteúdo rRelacionado
Diapositivos para si (20)
Quem viu também gostou (11)
Semelhante a iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development (20)
Mais recentes (20)
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
- 1. CSS3 & iPhone<br />http://findmebyip.com/litmus/<br />Estelle Weyl<br />http://standardista.com<br />http://evotech.net/blog<br />@estellevw<br />
- 2. http://findmebyip.com/litmus/<br />
- 3. CSS2.1<br />
- 4. CSS3<br />Unfinished, but well supported<br />
- 5. iPhone = Safari<br />No need to do any Cross browser testing!!!<br />
- 6. CSS3<br />Safari Supports all of CSS3<br />Safari Supports HTML5<br />almost<br />^<br />much of<br />^<br />
- 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. 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. HTML5<br />databases<br />Storage<br />Offline Applications<br />GeoLocation<br /><canvas>, <svg>, <audio>, <video><br />Web Forms…<br />
- 10. HTML5 Template<br /><!DOCTYPE html><html><head><meta charset="UTF-8"/><title>Remember this!!</title></head><body></body></html><br />
- 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. iPhone Input Behavior<br />
- 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. Firebug for iPhone???<br />Settings > Safari > Developer > Debug Console<br />
- 15. Firebug for Safari?<br />Switch user agent to iPhone<br />Use Web Inspector to debug<br />
- 16. iPhone Simulator<br />
- 17. And for Windows?<br />And for Windows?<br />
- 18. Beautiful bookmarks<br /><link rel="apple-touch-icon" href="/iphoneicon.png" /><br />apple-touch-icon.png<br />
- 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. Targeting the Phone<br />@media screen and (max-device-width: 480px){ <br /> /* iPhone CSS here */ <br />} <br />
- 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. Don’t reinvent the wheel<br />
- 23. Sencha Touch<br />
- 24. http://graffletopia.com/stencils/358<br />http://graffletopia.com/stencils/392<br />http://glyphish.com/<br />
- 25.
- 26.
- 27.
- 28.
- 29. http://www.westciv.com/tools/gradients/<br />
- 30.
- 31.
- 32. h1 {<br /> white-space: nowrap;<br /> width: 180px; <br /> overflow: hidden;<br /> -o-text-overflow: ellipsis;<br />text-overflow: ellipsis;<br />}<br />
- 33.
- 34.
- 35.
- 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.
- 38.
- 39.
- 40.
- 41. CSS3 Selectors<br />:nth-of-type()<br />tr:nth-of-type(even) td{<br /> background-color: #dedede;<br />}<br />
- 42. Thanks.<br />Estelle Weyl<br />Twitter: @estellevw<br />Blog: http://www.standardista.com<br />http://evotech.net/blog<br />
- 43. Prizes<br />Copy of my Book - Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKithttp://apress.com/book/view/9781430230069<br />
