Your SlideShare is downloading. ×
0
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich

5,403

Published on

Published in: Technology, Business
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,403
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
52
Comments
1
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. HTML5 and CSS3: Exploring Mobile Possibilities
  2. Roby on Rails
  3. Mozilla is a global non-profitdedicated to putting you in controlof your online experience andshaping the future of the Web forthe public good
  4. CSS Media Queries
  5. width colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  6. min-widthmax-widthorientation
  7. <link rel="stylesheet" href="pretty.css" media="screen and (min-width: 500px)">
  8. .nav { width: 150px;}@media screen and (min-width: 500px) { .nav { width: 300px; }}
  9. @media screen and (min-width: 500px) and (max-width: 1024px) { .nav { width: 200px; }}
  10. @media screen and (min-width: 100px),@media handheld { .nav { width: 350px; }}
  11. @media only screen and (min-width: 100px) { .nav { width: 350px; }}
  12. @media not screen and (min-width: 100px) { .nav { width: 100%; }}
  13. @media screen and (orientation: landscape) { .nav { float: left; width: 20%; } .main { float: right; width: 80%; }}
  14. @media screen and (orientation: portrait) { .nav { width: 100%; } .main { width: 100%; }}
  15. <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  16. http://mediaqueri.es/
  17. CSS Flex Box
  18. <div class="flex-container"> <section class="col-1">I am column 1</section> <section class="col-2">I am column 2</section> <section class="col-3">I am column 3</section></div>
  19. .flex-container { display: -moz-box; display: -ms-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; -ms-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal;}
  20. .col-1 { -moz-box-flex: 1; -ms-box-flex: 1; -webkit-box-flex: 1; box-flex: 1;}.col-2 { -moz-box-flex: 1; -ms-box-flex: 1; -webkit-box-flex: 1; box-flex: 1;}.col-3 { -moz-box-flex: 2; -ms-box-flex: 2; -webkit-box-flex: 2; box-flex: 2;}
  21. .col-1 { -moz-box-ordinal-group: 2; -ms-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; box-ordinal-group: 2;}.col-2 { -moz-box-ordinal-group: 3; -ms-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; box-ordinal-group: 3;}.col-3 { -moz-box-ordinal-group: 1; -ms-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; box-ordinal-group: 1;}
  22. flex- instead of box-
  23. CSS Transitions
  24. /* Shorthand version */#hello { display: inline-block; height: 20px; opacity: 0.3; -moz-transition: height 1s ease-out, opacity 1s ease; -ms-transition: height 1s ease-out, opacity 1s ease; -o-transition: height 1s ease-out, opacity 1s ease; -webkit-transition: height 1s ease-out, opacity 1s ease; transition: height 1s ease-out, opacity 1s ease;}#hello:hover { height: 40px; opacity: 1;}
  25. /* Shorthand version */.menu-item { position: relative; display: inline-block; border: 1px dashed #000; padding: 10px; background: #ffffa2; height: 20px; opacity: 0.3; text-decoration: none; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; transition: all 1s ease;}.menu-item:hover { opacity: 1; -moz-transform: scale(2) rotate(30deg) translate(50px); -ms-transform: scale(2) rotate(30deg) translate(50px); -o-transform: scale(2) rotate(30deg) translate(50px); -webkit-transform: scale(1.2) rotate(30deg) translate(50px); transform: scale(2) rotate(30deg) translate(50px);}
  26. .love-me { -webkit-transform: translate3d(0, 0, 0);}
  27. CSS Animations
  28. .animation-container { height: 60px; padding: 10px; -moz-animation-name: movearound; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-timing-function: ease; -webkit-animation-name: movearound; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease;}@-moz-keyframes movearound { from { width: 200px; background: #f00; opacity: 0.5; -moz-transform: scale(0.5) rotate(15deg); } to { width: 400px; background: #ffffa2; opacity: 1; -moz-transform: scale(1) rotate(0deg); }}
  29. @-webkit-keyframes movearound { from { width: 200px; background: #f00; opacity: 0.5; -webkit-transform: scale(0.5) rotate(15deg); } to { width: 400px; background: #ffffa2; opacity: 1; -webkit-transform: scale(1) rotate(0deg); }}
  30. CSS box-shadow and text-shadow
  31. text-overflow: ellipsis
  32. HTML5 Forms
  33. New form types<input type="color"> <input type="range"><input type="date"> <input type="search" results="5"<input type="datetime"> autosave="saved-searches"><input type="datetime-local"> <input type="tel"><input type="email"> <input type="time"><input type="month"> <input type="url"><input type="number"> <input type="week">
  34. New form attributes<input type="text" autocomplete="off"><input type="text" autofocus><input type="submit" formaction="http://example.org/save" value="Save"><input type="submit" formenctype="application/x-www-form-urlencoded" value="Save with enctype"><input type="submit" formmethod="POST" value="Send as POST"><input type="submit" formnovalidate value="Dont validate"><input type="submit" formtarget="_blank" value="Post to new tab/window">
  35. <input type="text" list="data-list"><input type="range" max="95"><input type="range" min="2"><input type="file" multiple><input type="text" readonly><input type="text" required><input type="text" pattern="[A-Z]*"><input type="text" placeholder="E.g. Robocop"><input type="text" spellcheck="true"><input type="number" step="5">
  36. New form elements<input type="text" list="data-list"><datalist id="data-list"> <option value="Hugo Reyes"> <option value="Jack Shephard"> <option value="James Sawyer Ford"> <option value="John Locke"> <option value="Sayid Jarrah"></datalist>
  37. <keygen></keygen><meter min="0" max="10" value="7"></meter><input type="range" id="range"><output for="range" id="output"></output><progress max="100" value="70">70%</progress>
  38. <input type="range" id="range"><output for="range" id="output"></output><script> (function () { var theForm = document.getElementById("the-form"); if ("oninput" in theForm) { theForm.addEventListener("input", function () { output.value = range.value; }, false); } })();</script>
  39. http://www.quirksmode.org/html5/inputs.htmlhttp://www.quirksmode.org/html5/inputs_mobile.htmlhttp://wufoo.com/html5/
  40. Link protocols
  41. #b ro ws er<a href="tel:+441111234567">tel: link</a> lo ve<a href="sms:+441111234567">sms: link</a><a href="sms:+441111234567?body=Text%20me"> sms: with body</a><a href="sms:+441111234567,+441111678901"> sms: with multiple numbers</a><a href="sms:+441111234567,+441111678901?body=Text%20me"> sms: with multiple numbers + body</a>
  42. JavaScript on mobile
  43. Web Storage
  44. sessionStorage.setItem("Charming", "Piers Morgan");console.log(sessionStorage.getItem("Charming"));
  45. localStorage.setItem("Job", "Show host");
  46. var piersMorgan = { "Transportation" : "Segway", "Damage" : "Three broken ribs"};localStorage.setItem("piersMorgan", JSON.stringify(piersMorgan));console.log(typeof JSON.parse(localStorage.getItem("piersMorgan")));
  47. Web SQL IndexedDB
  48. Geolocation
  49. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); });}
  50. Offline Web Applications
  51. // Poll the navigator.onLine propertysetInterval(function () { console.log(navigator.onLine);}, 1000);
  52. <!DOCTYPE html><html manifest="offline.appcache"><head>...
  53. CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
  54. History API
  55. window.history.pushState(state, title, url);
  56. var url = "http://robertnyman.com",title = "My blog",state = { address : url};window.history.pushState(state, title, url);
  57. Mobile Perf
  58. weinre
  59. position: fixedoverflow: scroll-webkit-overflow-scrolling: touchWeb Workers
  60. Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/

×