Making HTML5 Work Everywhere
Download as PPTX, PDF1 like1,753 views
The document discusses strategies for adopting HTML5 and CSS3 features, emphasizing the evolution of web standards and the importance of browser compatibility. It outlines techniques like progressive enhancement, graceful degradation, and the use of polyfills to ensure functionality across different browsers. Todd Anglin shares insights on testing for features and provides resources for implementing modern web techniques effectively.
![[Source: Aaron Olaf, Flickr]](https://image.slidesharecdn.com/making-html5-work-everywherev4-140414151738-phpapp02/85/Making-HTML5-Work-Everywhere-30-320.jpg)
![[Source: Mercedes USA, http://mbusa.com/]](https://image.slidesharecdn.com/making-html5-work-everywherev4-140414151738-phpapp02/85/Making-HTML5-Work-Everywhere-31-320.jpg)
![Modernizr.[featureName]
if (Modernizr.canvas) { //Use It! }
.[featureName] || .no-[featureName]
.no-canvas { //Styles }
.canvas { //Other Styles}](https://image.slidesharecdn.com/making-html5-work-everywherev4-140414151738-phpapp02/85/Making-HTML5-Work-Everywhere-42-320.jpg)
Making HTML5 Work Everywhere
- 4. EVP Product Strategy, Telerik 5x Microsoft MVP, ASP Insider, O'Reilly Author
- 5. Session Road Map Understanding the Evolution Adoption Strategies Applied Techniques Goal: Leave with at least 1 HTML5/CSS3 technique you can use today
- 6. “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.” -W3C on HTML4
- 7. HTML4 = Rough Guide Unpredictable Browser Support
- 8. How is the web evolving?
- 10. “Living Standard” WebSockets FileAPI WebGL HTML5 Forms Geolocation Offline Canvas Video Audio Canvas Video Geolocation Semantic Tags SVG WHATWG | W3C | IETF
- 11. Where is everywhere? (Which browsers matter?)
- 12. Know your users. Know your browsers.
- 13. of internet browses with IE, FF, Safari, Chrome, or Opera 99%
- 20. 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.” “ Dean Hachamovitch Corporate VP, IE
- 21. WD LC CR PR REC
- 22. In the future, browsers compete on speed, not on features
- 23. In the future, browsers update automatically and often
- 24. What is usable today?
- 25. X X X X X X X X X X X X X X X Adoption Strategies
- 26. X X X X X X X X X X X X X X X Adoption Strategies X X
- 28. X X X X X X X X X X X X X X X Adoption Strategies X X X X X X X
- 30. [Source: Aaron Olaf, Flickr]
- 31. [Source: Mercedes USA, http://mbusa.com/]
- 32. X X X X X X X X X X X X X X X Adoption Strategies X X X X X X X
- 33. 13:17
- 35. STRATEGY #1 Lowest Common Denominator
- 36. THANKS FOR ATTENDING! Don’t forget to fill-out your evals. The end.
- 37. 25 26 41 138138 286287303320329337 374378386389390397415430434448 498505 0 100 200 300 400 500 600 relative HTML5 scores IE10 IE11 HTML5Test.com
- 38. 0 10 20 30 40 50 60 70 80 90 IE6 IE7 IE8 IE9 IE10 IE11* FeatureCount Supported HTML5/CSS3 Features As reported by CanIUse.com
- 39. Selectors (2.1) position:fixed 7.0 LocalStorage DragDrop API JSON querySelector 8.0 Video Audio WOFF SVG Canvas Geolocation Semantic Tags Lots of CSS3 9.0 XHR2 Web Workers Web Sockets IndexedDB History API File API CORS Blob URLs Typed Arrays Defer/Async Form Validation New Input Types Offline App Cache Much more CSS3 10.0
- 40. Don't sniff browsers. (Test for features.)
- 41. modernizr
- 42. Modernizr.[featureName] if (Modernizr.canvas) { //Use It! } .[featureName] || .no-[featureName] .no-canvas { //Styles } .canvas { //Other Styles}
- 43. DEMO Modernizr
- 45. 25 26 41 138 303 320 329 337 374 378 389 434 0 50 100 150 200 250 300 350 400 450 500 relative HTML5 scores
- 48. Not all polyfills are created equal.
- 49. Old Equivalent Plug-in Backed JavaScript Powered Use legacy versions of same feature Implement feature using JavaScript Map browser feature to plug- in feature Memory & speed friendly Limited API coverage Portable & more complete Can be slow & memory hog Complete API & speedy Requires (user installed) plug-in
- 50. Old Equivalent Plug-in Backed JavaScript Powered • Fonts • LocalStorage • Semantic Tags • Opacity • CORS • CSS3 Selectors • CSS Layouts • Forms • Validation • JSON • Canvas* • Database • Canvas*
- 52. STRATEGY #3 Graceful Degradation & Progressive Enhancement
- 54. Safe WarningCaution • Relies on old native browser feature • Does not interact with DOM/rendering • Uses a plug-in (Flash/Gears) to do heavy lifting Polyfill Guidance • Large amount of JavaScript required • Manipulates DOM/layout • Superficial benefit (ex: rounded corners) • Attempts to change rendering (CSS) • Requires execution on page load
- 56. Which HTML5/CSS3 technique will you try today?
Editor's Notes
- #3: Making HTML5 Work EverywhereOne of the great promises of HTML5 is that you can create software that runs everywhere. In many ways, HTML5 lives-up to this promise, but as with any evolving standard, support across different browsers and devices is inconsistent. To effectively adopt HTML5 today, developers must master the skills that fill-in the gaps and minimize the differences between HTML5 runtimes. In this session, you will learn the essential techniques needed to create HTML5 sites and apps that truly work everywhere. You will learn: • Learn four strategies for adopting HTML5 • Analyze the impact browsers have on HTML5 readiness & adoption • Explore new HTML5 features and techniques for using in older browsers
- #5: Talking Point: I know many of you today may be skeptical that HTML5 can be used EVERYWHERE (including old IE), but that’s good! One of my goals is to turn skeptics in to believers.
- #8: http://dev.w3.org/html5/html4-differences/Goes on to say:The same goes for XHTML1, which defines an XML serialization for HTML4, and DOM Level 2 HTML, which defines JavaScript APIs for both HTML and XHTML. HTML5 will replace these documents.
- #12: WHATWG FAQs on Living Standard: http://wiki.whatwg.org/wiki/FAQ#What_does_.22Living_Standard.22_mean.3F
- #14: CSS3’s evolutionary approachMicrosoft is focusing primarily on adding product support at the Candidate Recommendation stageReview status of various CSS3 proposed specs: http://www.w3.org/Style/CSS/current-work
- #16: Microsoft Extensions: http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspxVendor specific prefixes: http://reference.sitepoint.com/css/vendorspecific
- #17: [Audience Prompt]
- #18: Specific browsers (and versions) your users are using are what matter.
- #19: Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0&qpcustomd=0&qptimeframe=QStat Accuracy debate:http://www.digitaltrends.com/computing/who-counts-the-counters-is-chrome-really-more-popular-than-ie/http://www.zdnet.com/the-web-browser-wars-continue-and-1-is-well-that-depends-on-whom-you-ask-7000009305/
- #23: DISNEY SPEAKING NOTE: Emphasize the difference in Chrome shipping schedules that produces so many browser versions.
- #24: Mobile browsers are just as important for today's web developer.Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1&qpcustomb=1&qpsp=161&qpnp=13&qptimeframe=M&qpf1
- #26: What is the IE strategy for HTML5/CSS3?
- #27: On Microsoft’s strategy/approach to HTML5:http://blogs.msdn.com/b/ie/archive/2010/12/20/html5-site-ready-and-experimental.aspxhttp://blogs.msdn.com/b/interoperability/archive/2010/12/21/prototyping-early-w3c-html5-specifications.aspx
- #28: CSS3’s evolutionary approachMicrosoft is focusing primarily on adding product support at the Candidate Recommendation stageReview status of various CSS3 proposed specs: http://www.w3.org/Style/CSS/current-work
- #29: http://html5labs.interoperabilitybridges.com/http://www.beautyoftheweb.com
- #30: Sun Spider benchmark test:http://www.webkit.org/perf/sunspider/sunspider.html
- #31: Sun Spider benchmark test:http://www.webkit.org/perf/sunspider/sunspider.html
- #32: This is not a question with a single correct answer. It all depends on your audience and strategy.There are several general strategies for defining what is “usable” today.
- #35: Useful for adding HTML5 to both older browsers + new browsers that do not have a specific HTML5 featurehttp://remysharp.com/2010/10/08/what-is-a-polyfill/https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
- #38: Strategy: Design for lowest common denominator, Enrich/Enhance as more capabilities are availableImage Source: http://www.flickr.com/photos/aaronolaf/833342657/
- #39: Strategy: Design for best case scenario (premium features), and gracefully remove features as resources are not availableImage Source: http://www.mbusa.com/mercedes/index
- #41: I want it now!How do you use HTML5 today?
- #43: HTML5 & CSS3 in VS2010 SP1: http://madskristensen.net/post/HTML5-CSS3-in-Visual-Studio-2010-SP1.aspxHTML5 in VS2008: http://stackoverflow.com/questions/1682180/will-visual-studio-2010-support-html-5
- #47: Scores from HTML5Test.com (updated Oct 2013)
- #49: CanIUse.comIE 11 (versus 10): Pointer EventsFlexboxViewpoint UnitsxDoc MessagingFull Screen APICSS3 Border ImagesWebGL*dataset
- #50: Modern adoption of HTML5 is done by checking for individual feature support, NOT by checking for specific browsers/browser versions. This helps you adopt as much of HTML5 as possible in a progressively optimistic manner.
- #51: http://www.modernizr.com/
- #52: http://www.modernizr.comhttp://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/Modernizr now ships with ASP.NET MVC 3
- #54: Chrome Framehttp://code.google.com/chrome/chromeframe/Let's you use Chrome browser engine in IE 6/7/8/9chrome=1 - Always activechrome=IE7 - Active for IE major version 7 or lowerchrome=IE8 - Active for IE major version 8 or lower
- #55: Scores from HTML5Test.com (updated Oct 2012)
- #56: Chrome frame simple test: http://jsbin.com/ocebej
- #61: Geolocationpolyfill: WebShim Library (http://afarkas.github.io/webshim/demos/index.html)