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 Techniques You Can Use Today

9,109 views

Published on

Published in: Technology, Design
  • Be the first to comment

HTML5 and CSS3 Techniques You Can Use Today

  1. 1. HTML5 and CSS3 Techniques You Can Use TodayDEV334<br />Todd Anglin<br />Chief Evangelist<br />Telerik<br />
  2. 2. Introductions<br />Todd Anglin<br />Chief Evangelist, Telerik<br />Microsoft MVP<br />ASP Insider<br />President NHDNUG & O’Reilly Author<br />TelerikWatch.com<br />@toddanglin<br />
  3. 3. Development Tools<br />Agile Planning<br />Testing<br />
  4. 4. Session Road Map<br />Goal: Leave with at least 1 <br />HTML5/CSS3 technique <br />you can use today<br />
  5. 5. “<br />While it continues to serve as a rough guide to many of the core features of HTML, it does not provide enough information to build implementations that interoperate with each other and, more importantly, with a critical mass of deployed content.”<br />-W3C on HTML4<br />
  6. 6. HTML4 = Rough Guide<br />Unpredictable Browser Support<br />
  7. 7. HTML & CSS History<br />HTML5<br />Addressing modern web applications & pains of the past<br />
  8. 8. HTML & CSS History<br />CSS: Plagued by implementation bugs & inconsistencies<br />CSS3<br />Improve consistency & power of styling language<br />
  9. 9. How is the web evolving?<br />
  10. 10. {<br />}<br /><HTML><br />CSS:3;<br />EMCAScript();<br />“HTML5”<br />
  11. 11. “Living Standard”<br /> Offline <br />Canvas Video<br /> Audio<br />WebSocketsFileAPI<br />WebGL<br /> HTML5 Forms<br />Geolocation<br />WHATWG | W3C | IETF<br />
  12. 12. Stable<br />Canvas | Local Storage |Microdata| Document Editing |Geolocation| Semantic Tags | Video/Audio | Selectors<br />In Progress<br />WebGL | WebSockets | File API | Drag-Drop API | IndexDB | Offline API | Web Workers | HTML5 Forms<br />
  13. 13.
  14. 14. IE9 offers support for the most relevant, real-world web patterns that developers are using today as well as the HTML5 patterns we expect to become more mainstream.”<br />“<br />-Dean Hachamovitch<br />Corporate VP, IE<br />
  15. 15. html5labs.interoperabilitybridges.com<br />+<br />Platform Previews<br />ie.microsoft.com/testdrive<br />
  16. 16. CSS 2.1<br />Selectors<br />CSS Color<br />CSS 2<br />Backgrounds &<br />Borders<br />Media Queries<br />Multi-column<br />25+ Drafts<br />Transitions<br />Transformations<br />Animations<br />Gradients<br />CSS3 Text<br />
  17. 17. -moz-border-radius: 5px 5px5px5px; <br />-webkit-border-radius: 5px;<br />border-radius: 5px;<br />-moz-box-shadow: 2px 2px2px #333;<br />-webkit-box-shadow: 2px 2px2px #333;<br />box-shadow: 2px 2px2px #333;<br />-webkit-background-size: 137px 50px;<br />-o-background-size: 137px 50px;<br />background-size: 137px 50px;<br />
  18. 18. Browser Prefixes<br />-webkit<br />-moz<br />-o<br />-ms<br />“standard” way browsers implement experimental features<br />
  19. 19. Browser Prefixes<br />15<br />
  20. 20. WD<br />LC<br />CR<br />PR<br />RE<br />
  21. 21. What is usable today?<br />
  22. 22. Adoption Strategies<br />Lowest Common Dominator<br />Only use features natively available in all target browsers<br />
  23. 23. Adoption Strategies<br />PolyfillEnriched<br />Only use features either natively available OR available via JavaScript polyfill<br />X X<br />
  24. 24. polyfill<br />(n) poly • fill: JavaScript that implants HTML5 functionality in a browser that does not offer native support<br />
  25. 25. Adoption Strategies<br />Alternate Experiences<br />Only use features available in target browsers AND design alternate experience for other browsers<br />X X<br />X X X<br />X X<br />
  26. 26. progressiveenhancementgracefuldegradation<br />
  27. 27. [Source: Aaron Olaf, Flickr]<br />
  28. 28. [Source: Mercedes USA, http://mbusa.com/]<br />
  29. 29. Adoption Strategies<br />Vertical Target<br />Create experiences targeted at specific browsers (or classes of browsers)<br />X X<br />X X X<br />X X<br />
  30. 30. Real World Browser Support<br />Better, but not perfect<br />Know your users. Know your browsers.<br />
  31. 31. HTML5 Techniques<br />You can use today<br />
  32. 32. W3C on HTML5<br />Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax.<br />Defines detailed processing models to foster interoperable implementations.<br />Improves markup for documents.<br />Introduces markup and APIs for emerging idioms, such as Web applications.<br />
  33. 33. Enriching VS Experience<br />Add IntelliSense & Schema Validation to <br />Visual Studio 2008/2010 (pre SP1) editor<br />http://bit.ly/vsHTML5<br />http://bit.ly/vsSVG<br />
  34. 34. Older Browsers<br />
  35. 35. Modernizr<br />Shiv’r + Inspector<br />Simple way to check feature support<br />Conditional JS and CSS<br />.multiplebgs div p {<br /> /* properties for browsers that<br /> support multiple backgrounds */<br />}<br />.no-multiplebgs div p {<br /> /* optional fallback properties<br /> for browsers that don't */<br />}<br />if (Modernizr.canvas) {<br /> //Canvas supported<br />}<br />if (Modernizer.cssColumns){<br /> //Columns supported<br />}<br />//Etc...<br />*Don’t use with IE HTML5shiv. One or the other.<br />
  36. 36. DEMO<br />Polyfilling & Older Browsers<br />with Modernizr<br />
  37. 37. Semantic Tags<br />Tags with meaning<br /><body><br /> <div id=“header”><br /> </div><br /> <div id=“content”><br /> <div id=“nav”></div><br /> </div><br /> <div id=“footer”><br /> </div><br /></body><br /><body><br /> <header><br /> </header><br /> <section><br /> <nav></nav><br /> </section><br /> <footer></footer><br /></body><br />VS.<br />*Need polyfill to trigger styling in old IE<br />Safe to use today!<br />
  38. 38. Video & Audio<br />Semantic rich media<br />Reach more people on more devices<br />Container<br />MP4<br />H.264<br />Codec<br />Safe to use today!<br />
  39. 39. Geolocation<br />Usable on modern browsers + mobile<br />Requires plug-in for older browsers<br />navigator.geolocation.getCurrentPosition(callback);<br />function callback(position){<br />varlat = position.coords.latitude;<br />varlng = position.coords.longitude;<br />varacc = position.coords.accuracy;<br />}<br />Safe to use today!<br />
  40. 40. Local Storage<br />Usable in modern browsers<br />sessionStorage.setItem('value', this.value);<br />localStorage.setItem('value', this.value);<br />sessionStorage.getItem(‘value’);<br />sessionStorage.clear();<br />localStorage.clear();<br />sessionStorage = per window<br />localStorage = per browser<br />5 MB limit<br />
  41. 41. HTML5 Forms<br />Improved usability<br />Uneven support across browsers<br /><form name="f"><br /> <input id="q" autofocus><br /> <!--Technique to support older browsers--><br /> <script><br /> if (!("autofocus" in document.createElement("input"))) {<br />document.getElementById("q").focus();<br /> }<br /> </script><br /> <input type="submit" value="Go"><br /></form><br />Safe to use today!<br />
  42. 42. Rich Snippets (*microdata)<br />Content with meaning<br />Machines understand more of your content<br /><div itemscopeitemtype="http://data-vocabulary.org/Event"><br /> <time itemprop="startDate" <br />datetime="2015-10-15T19:00-08:00"><br /> Oct 15, 7:00PM<br /> </time>—<br /> <time itemprop="endDate"<br />datetime="2015-10-15T19:00-08:00"><br /> Oct 15, 9:00PM<br /> </time><br /> <span itemprop="geo" itemscope<br />itemtype="http://data-vocabulary.org/​Geo"><br /><meta itemprop="latitude" content="37.774929" /><br /><meta itemprop="longitude" content="-122.419416" /> <br /> </span><br />...<br /></div><br />Safe to use today!<br />
  43. 43. SVG & Canvas<br />Safe to use today!<br />
  44. 44. Canvas for IE6/7/8<br />Many polyfills for older browsers<br />JavaScript or Flash based<br />Better Perf<br />
  45. 45. Custom Attributes<br />data-*<br />Valid approach to storing data in HTML<br /><!--Store values in data-* attributes--><br /><div id="mydiv" data-key="26" data-name="My product name"><br />This product is an extremely popular choice.<br /></div><br /><!--Access values with JavaScript--><br />varmydiv=document.getElementById('mydiv')<br />//Using DOM's getAttribute() property<br />varkey = mydiv.getAttribute("data-key") //returns "26" <br />//OR Using JavaScript's dataset property**var key = mydiv.dataset.key //returns "26"<br />Safe to use today!<br />
  46. 46. CSS3 Techniques<br />You can use today<br />
  47. 47. Leveling the Playing Field<br />CSS Reset<br />Browsers ship with built-in styles – zero them out!<br />Enable newer features in older browsers<br />http://html5reset.org<br />http://html5boilerplate.com<br />
  48. 48. CSS3 Selectors<br />Powerful new selector options<br />//Alternating Items<br />li:nth-child(odd) { color: blue; }<br />li:nth-child(even) { color: green; }<br />li:nth-child(3n) { color: red; } //Every 3rd item<br />//First/Last Items<br />li:first-of-type { color: blue; }<br />li:not(:first-of-type):not(:last-of-type) { color: orange; } //All *but* first/last<br />//Enabled/Disabled<br />input:enabled { border: 2px solid green; }<br />input:disabled{ background-color: #BBB; }<br />*Use jQuery to support legacy browsers<br />
  49. 49. CSS3 Color<br />HSL and RGB<br />Support for new color models + alpha channels<br />//HSL<br />background:hsl(320,100%,25%);<br />//HSLa<br />background:hsla(165, 100%, 50%, 1.0);<br />//RGB<br />background:rgb(155,100,100);<br />//RGBa<br />background:rgba(153, 134, 117, 0.2);<br />
  50. 50. Custom Fonts<br />Biggest Problem?<br />Licensing!<br />@font-face { <br /> font-family: Delicious; <br />src: url('Delicious-Roman.otf') format(“opentype”); <br />} <br />//Usage<br />h3 { font-family: Delicious, sans-serif; }<br />
  51. 51. Web Font Providers<br />Solve the licensing problem<br />Host the WOFF/TTF/OTF font files <br />Provide easy-to-use code<br />http://www.fontsquirrel.com/<br />http://webfonts.fonts.com<br />http://typekit.com/libraries<br />http://code.google.com/webfonts<br />
  52. 52. Borders & Backgrounds<br />Rounded corners, drop shadows, multi-backgrounds<br />Expect GD for older browsers<br />//Rounded Corners (Size)<br />border-radius: 5px;<br />//Drop shadow (hShift vShift Size Color)<br />box-shadow: 2px 2px 5px #333; <br />//Background control<br />background: url(top.gif) top left no-repeat,url(bottom.gif) bottom left no-repeat;<br />background-size: 150px 50px;<br />*Use CSS3 PIE to support legacy IE browsers<br />
  53. 53. Drop Shadows<br />Exactly like it sounds<br />box-shadow: <hShift> <vShift> <size> <color>;<br />-moz-box-shadow: 2px 2px2px #333;<br />-webkit-box-shadow: 2px 2px2px #333;<br />box-shadow: 2px 2px2px #333;<br />Safe to use today!<br />
  54. 54. Text Shadows<br />Uniform across supported browsers!<br />text-shadow: <h offest> <v offset> <blur size> <color>;<br />text-shadow: 2px 2px2px #333;<br />//You can apply multiple shadows<br />text-shadow: 2px 2px2px #333, 2px 2px 3px #CCC;<br />Safe to use today!<br />
  55. 55. Backgrounds<br />More options, more power<br />multiple backgrounds<br />resize backgrounds<br />background clipping<br />/*Background size*/<br />-webkit-background-size: 137px 50px;<br />-o-background-size: 137px 50px;<br />background-size: 137px 50px;<br />/*Multiple Backgrounds*/<br />background: url(top.gif) top left no-repeat,<br />url(bottom.gif) bottom left no-repeat,<br />url(middle.gif) left repeat-y;<br />/*Background origin*/<br />background-origin: border;<br />/*Other options: padding or content*/<br />Safe to use today!<br />
  56. 56. Gradients<br />Emerging CSS standard<br />But useful and desirable<br />Can be “shived” to support all browsers<br />
  57. 57. Media Queries<br />Target styles to specific devices…<br />And features!<br />/*These two rules do the same thing*/<br />@media all and (min-width:500px) { … } <br />@media (min-width:500px) { … }<br />/*Multiple conditions*/<br />@media screen and (min-width: 600px) and (max-width: 900px) {<br /> .class {<br /> background: #333;<br /> }<br />}<br />
  58. 58. LESS for CSS<br />Use LESS to write less CSS<br />Variables, operations, mix-ins, nested rules<br /><link rel="stylesheet/less" href="style.less" type="text/css" /><br /><script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script><br />/*Variables*/<br />@primaryColor: #383939;<br />background-color: @primaryColor;<br />/*Mix-ins!!*/<br />.roundedCorners (@radius: 12px) {<br /> -moz-border-radius: @radius;<br /> -webkit-border-radius: @radius;<br /> border-radius: @radius;<br />}<br />#page { background-color: @primaryColor; .roundedCorners; }<br />Safe to use today!<br />
  59. 59. Animating with CSS<br />Animate by setting CSS properties<br />Works when JS is disabled<br />#id_of_element { <br />-webkit-transition: all 1s ease-in-out; <br />-moz-transition: all 1s ease-in-out; <br />-o-transition: all 1s ease-in-out; <br />transition: all 1s ease-in-out; <br />}<br />Safe to use today!<br />
  60. 60. Tomorrow Land (aka Mobile)<br />
  61. 61. which HTML5/CSS3 technique will you try?<br />
  62. 62. anglin@telerik.com<br />@toddanglin + @htmlui<br />

×