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.

HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event

18,881 views

Published on

Going through HTML5 and CSS3 possibilities with a mobile perspective

HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event

  1. HTML5 and CSS3: Exploring Mobile Possibilities
  2. CSS Media Queries
  3. width colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  4. min-widthmax-widthorientation
  5. <link rel="stylesheet" href="pretty.css" media="screen and (min-width: 500px)">
  6. .nav { width: 150px;}@media screen and (min-width: 500px) { .nav { width: 300px; }}
  7. @media screen and (min-width: 500px) and (max-width: 1024px) { .nav { width: 200px; }}
  8. @media screen and (min-width: 100px),@media handheld { .nav { width: 350px; }}
  9. @media only screen and (min-width: 100px) { .nav { width: 350px; }}
  10. @media not screen and (min-width: 100px) { .nav { width: 100%; }}
  11. @media screen and (orientation: landscape) { .nav { float: left; width: 20%; } .main { float: right; width: 80%; }}
  12. @media screen and (orientation: portrait) { .nav { width: 100%; } .main { width: 100%; }}
  13. <meta name="viewport" content="width=device-width, maximum-scale=1.0">
  14. CSS3 Media Queries and creating adaptive layouts
  15. http://mediaqueri.es/
  16. CSS Flex Box
  17. <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>
  18. .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;}
  19. .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;}
  20. .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;}
  21. flex- instead of box-
  22. CSS Transitions
  23. /* 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;}
  24. /* 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);}
  25. .love-me { -webkit-transform: translate3d(0, 0, 0);}
  26. CSS Animations
  27. .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); }}
  28. @-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); }}
  29. CSS box-shadow and text-shadow
  30. text-overflow: ellipsis
  31. HTML5 Forms
  32. 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">
  33. 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">
  34. <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">
  35. 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>
  36. <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>
  37. <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>
  38. http://www.quirksmode.org/html5/inputs.htmlhttp://www.quirksmode.org/html5/inputs_mobile.htmlhttp://wufoo.com/html5/
  39. Link protocols
  40. <a href="tel:+441111234567">tel: link</a><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>
  41. #browserlove
  42. Web Storage
  43. sessionStorage.setItem("Charming", "Piers Morgan");console.log(sessionStorage.getItem("Charming"));
  44. localStorage.setItem("Job", "Show host");
  45. var piersMorgan = { "Transportation" : "Segway", "Damage" : "Three broken ribs"};localStorage.setItem("piersMorgan", JSON.stringify(piersMorgan));console.log(typeof JSON.parse(localStorage.getItem("piersMorgan")));
  46. Web SQL IndexedDB
  47. Geolocation
  48. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); });}
  49. Offline Web Applications
  50. // Poll the navigator.onLine propertysetInterval(function () { console.log(navigator.onLine);}, 1000);
  51. <!DOCTYPE html><html manifest="offline.appcache"><head>...
  52. CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
  53. History API
  54. var url = "http://robertnyman.com",title = "My blog",state = { address : url};window.history.pushState(state, title, url);
  55. window.history.replaceState(state, title, url);
  56. Mobile Perf
  57. weinre
  58. position: fixedoverflow: scroll-webkit-overflow-scrolling: touchWeb Workers
  59. Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/

×