Your SlideShare is downloading. ×
  • Like
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 10,578 views
Published

Going through HTML5 and CSS3 possibilities with a mobile perspective

Going through HTML5 and CSS3 possibilities with a mobile perspective

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
10,578
On SlideShare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
242
Comments
2
Likes
15

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. 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/