This document discusses HTML5 and CSS3 features for mobile development. It covers CSS media queries for responsive design, CSS flexbox for layout, CSS transitions and animations, HTML5 forms, and other features like geolocation, offline web applications, and performance optimizations for mobile.

1. HTML5 and CSS3: Exploring
Mobile Possibilities

4. CSS Media Queries

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

6. min-width
max-width
orientation

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, maximum-scale=1.0">

16. CSS3 Media Queries and creating adaptive layouts

17. http://mediaqueri.es/

18. CSS Flex Box

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

20. .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;
}

21. .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;
}

22. .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;
}

23. flex- instead of box-

24. CSS Transitions

25. /* 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;
}

26. /* 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);
}

28. .love-me {
-webkit-transform: translate3d(0, 0, 0);
}

29. CSS Animations

30. .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);
}
}

31. @-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);
}
}

32. CSS box-shadow and text-shadow

35. text-overflow: ellipsis

38. HTML5 Forms

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

44. Link protocols

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

46. #browserlove

47. Geolocation

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

51. Offline Web Applications

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

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

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

56. Mobile Perf

57. weinre

60. position: fixed
overflow: scroll
-webkit-overflow-scrolling: touch
Web Workers

63. Robert Nyman
robertnyman.com/speaking/ robnyman@mozilla.com
robertnyman.com/html5/ Twitter: @robertnyman
robertnyman.com/css3/