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
Roby on Rails
Mozilla is a global non-profitdedicated to putting you in controlof your online experience andshaping the future of the Web...
CSS Media Queries
width                 colorheight                color-indexdevice-width          monochromedevice-height         resoluti...
min-widthmax-widthorientation
<link rel="stylesheet"  href="pretty.css"  media="screen and (min-width: 500px)">
.nav {    width: 150px;}@media screen and (min-width: 500px) {    .nav {        width: 300px;    }}
@media screen and (min-width: 500px) and (max-width: 1024px) {    .nav {        width: 200px;    }}
@media screen and (min-width: 100px),@media handheld {    .nav {        width: 350px;    }}
@media only screen and (min-width: 100px) {    .nav {        width: 350px;    }}
@media not screen and (min-width: 100px) {    .nav {        width: 100%;    }}
@media screen and (orientation: landscape) {    .nav {        float: left;        width: 20%;    }    .main {        float...
@media screen and (orientation: portrait) {    .nav {        width: 100%;    }    .main {        width: 100%;    }}
<meta name="viewport"    content="width=device-width, initial-scale=1.0"><meta name="viewport"    content="width=device-wi...
http://mediaqueri.es/
CSS Flex Box
<div class="flex-container">    <section class="col-1">I am column 1</section>    <section class="col-2">I am column 2</se...
.flex-container {    display: -moz-box;    display: -ms-box;    display: -webkit-box;    display: box;    -moz-box-orient:...
.col-1 {    -moz-box-flex: 1;    -ms-box-flex: 1;    -webkit-box-flex: 1;    box-flex: 1;}.col-2 {    -moz-box-flex: 1;   ...
.col-1 {    -moz-box-ordinal-group: 2;    -ms-box-ordinal-group: 2;    -webkit-box-ordinal-group: 2;    box-ordinal-group:...
flex- instead of box-
CSS Transitions
/* Shorthand version */#hello {    display: inline-block;    height: 20px;    opacity: 0.3;    -moz-transition: height 1s ...
/* Shorthand version */.menu-item {    position: relative;    display: inline-block;    border: 1px dashed #000;    paddin...
.love-me {    -webkit-transform: translate3d(0, 0, 0);}
CSS Animations
.animation-container {    height: 60px;    padding: 10px;    -moz-animation-name: movearound;    -moz-animation-duration: ...
@-webkit-keyframes movearound {    from {         width: 200px;         background: #f00;         opacity: 0.5;         -w...
CSS box-shadow and text-shadow
text-overflow: ellipsis
HTML5 Forms
New form types<input type="color">             <input type="range"><input type="date">              <input type="search"  ...
New form attributes<input type="text" autocomplete="off"><input type="text" autofocus><input type="submit" formaction="htt...
<input type="text" list="data-list"><input type="range" max="95"><input type="range" min="2"><input type="file" multiple><...
New form elements<input type="text" list="data-list"><datalist id="data-list">    <option value="Hugo Reyes">    <option v...
<keygen></keygen><meter min="0" max="10" value="7"></meter><input type="range" id="range"><output for="range" id="output">...
<input type="range" id="range"><output for="range" id="output"></output><script>    (function () {         var theForm = d...
http://www.quirksmode.org/html5/inputs.htmlhttp://www.quirksmode.org/html5/inputs_mobile.htmlhttp://wufoo.com/html5/
Link protocols
#b                                                   ro                                                        ws         ...
JavaScript on mobile
Web Storage
sessionStorage.setItem("Charming", "Piers Morgan");console.log(sessionStorage.getItem("Charming"));
localStorage.setItem("Job", "Show host");
var piersMorgan = {    "Transportation" : "Segway",    "Damage" : "Three broken ribs"};localStorage.setItem("piersMorgan",...
Web SQL   IndexedDB
Geolocation
if (navigator.geolocation) {    navigator.geolocation.getCurrentPosition(function (position) {        alert(position.coord...
Offline Web Applications
// Poll the navigator.onLine propertysetInterval(function () {    console.log(navigator.onLine);}, 1000);
<!DOCTYPE html><html manifest="offline.appcache"><head>...
CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
History API
window.history.pushState(state, title, url);
var url = "http://robertnyman.com",title = "My blog",state = {    address : url};window.history.pushState(state, title, ur...
Mobile Perf
weinre
position: fixedoverflow: scroll-webkit-overflow-scrolling: touchWeb Workers
Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/    Twitter: @robertnymanrobertnyman.com/c...
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
×

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

8,845 views

Published on

Published in: Technology, Business

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

  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/

×