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 - Dynabyte event

6,847 views

Published on

Published in: Technology
  • Be the first to comment

HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event

  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. http://www.quirksmode.org/html5/inputs.htmlhttp://www.quirksmode.org/html5/inputs_mobile.htmlhttp://wufoo.com/html5/
  33. Link protocols
  34. <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>
  35. #browserlove
  36. Geolocation
  37. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); });}
  38. Offline Web Applications
  39. // Poll the navigator.onLine propertysetInterval(function () { console.log(navigator.onLine);}, 1000);
  40. <!DOCTYPE html><html manifest="offline.appcache"><head>...
  41. CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
  42. Mobile Perf
  43. weinre
  44. position: fixedoverflow: scroll-webkit-overflow-scrolling: touchWeb Workers
  45. Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/

×