1. HTML5 and CSS3: Exploring
Mobile Possibilities

5. Roby on Rails

6. Mozilla is a global non-profit
dedicated to putting you in control
of your online experience and
shaping the future of the Web for
the public good

9. CSS Media Queries

10. width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

11. min-width
max-width
orientation

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 screen and (min-width: 100px) {
.nav {
width: 350px;
}
}

17. @media not screen and (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. http://mediaqueri.es/

23. CSS Flex Box

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 of box-

29. CSS Transitions

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. CSS Animations

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 and text-shadow

40. text-overflow: ellipsis

43. HTML5 Forms

44. 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">

50. 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="Don't validate">
<input type="submit" formtarget="_blank" value="Post to new tab/window">

51. <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">

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

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">
<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>

56. http://www.quirksmode.org/html5/inputs.html
http://www.quirksmode.org/html5/inputs_mobile.html
http://wufoo.com/html5/

57. Link protocols

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. JavaScript on mobile

60. Web Storage

62. sessionStorage.setItem("Charming", "Piers Morgan");
console.log(sessionStorage.getItem("Charming"));

63. localStorage.setItem("Job", "Show host");

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

67. if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
alert(position.coords.latitude + ", " + position.coords.longitude);
});
}

70. Offline Web Applications

71. // Poll the navigator.onLine property
setInterval(function () {
console.log(navigator.onLine);
}, 1000);

72. <!DOCTYPE html>
<html manifest="offline.appcache">
<head>
...

73. CACHE MANIFEST
# VERSION 10
CACHE:
offline.html
base.css
FALLBACK:
online.css offline.css
NETWORK:
/live-updates

74. History API

75. window.history.pushState(state, title, url);

76. var url = "http://robertnyman.com",
title = "My blog",
state = {
address : url
};
window.history.pushState(state, title, url);

78. Mobile Perf

79. weinre

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/