Download as PDF, PPTX
![<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">](https://image.slidesharecdn.com/html5-css3-zurich-110908191646-phpapp02/75/HTML5-and-CSS3-exploring-mobile-possibilities-Frontend-Conference-Zurich-51-2048.jpg)
Uploaded byRobert Nyman
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
The document discusses HTML5 and CSS3 features for mobile development, including CSS media queries, flexbox, transitions, animations, and new HTML5 form elements. It also covers JavaScript techniques like geolocation, web storage, offline applications, and the history API. Additional topics include mobile performance optimization, debugging with Weinre, and link protocols.
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
- 1. HTML5 and CSS3:Exploring Mobile Possibilities
- 5.
- 6. Mozilla is aglobal non-profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
- 9.
- 10. width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
- 11.
- 12. <link rel="stylesheet" href="pretty.css" media="screen and (min-width: 500px)">
- 13. .nav { width: 150px; } @media screen and (min-width: 500px) { .nav { width: 300px; } }
- 14. @media screen and(min-width: 500px) and (max-width: 1024px) { .nav { width: 200px; } }
- 15. @media screen and(min-width: 100px), @media handheld { .nav { width: 350px; } }
- 16. @media only screenand (min-width: 100px) { .nav { width: 350px; } }
- 17. @media not screenand (min-width: 100px) { .nav { width: 100%; } }
- 18. @media screen and(orientation: landscape) { .nav { float: left; width: 20%; } .main { float: right; width: 80%; } }
- 19. @media screen and(orientation: portrait) { .nav { width: 100%; } .main { width: 100%; } }
- 20. <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">
- 22.
- 23.
- 24. <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>
- 25. .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; }
- 26. .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; }
- 27. .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; }
- 28. flex- instead ofbox-
- 29.
- 30. /* 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; }
- 31. /* 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); }
- 33. .love-me { -webkit-transform: translate3d(0, 0, 0); }
- 34.
- 35. .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); } }
- 36. @-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); } }
- 37. CSS box-shadow andtext-shadow
- 40.
- 43.
- 44. New form types <inputtype="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">
- 50. New form attributes <inputtype="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="Don't validate"> <input type="submit" formtarget="_blank" value="Post to new tab/window">
- 51. <input type="text" list="data-list"> <inputtype="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">
- 52. New form elements <inputtype="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>
- 53. <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>
- 54. <input type="range" id="range"> <outputfor="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>
- 56.
- 57.
- 58. #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>
- 59.
- 60.
- 62.
- 63.
- 64. var piersMorgan ={ "Transportation" : "Segway", "Damage" : "Three broken ribs" }; localStorage.setItem("piersMorgan", JSON.stringify(piersMorgan)); console.log(typeof JSON.parse(localStorage.getItem("piersMorgan")));
- 65. Web SQL IndexedDB
- 66.
- 67. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
- 70.
- 71. // Poll thenavigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
- 72.
- 73. CACHE MANIFEST # VERSION10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
- 74.
- 75.
- 76. var url ="http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state, title, url);
- 78.
- 79.
- 82. position: fixed overflow: scroll -webkit-overflow-scrolling:touch Web Workers
- 87. Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/