Downloaded 20 times
![[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)
Uploaded byTodd Anglin
Making HTML5 Work Everywhere
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.
More Related Content
Similar to Making HTML5 Work Everywhere
![谷歌留痕技术教程[ 𝙩𝙤𝙥 𝟮𝟯𝟯. 𝙘 𝙤𝙢 ]](https://cdn.slidesharecdn.com/ss_thumbnails/top233-260130173900-2eb784f9-thumbnail.jpg?width=640&height=640&fit=bounds)
![20260201 [FOSDEM] gomodjail - library sandboxing for Go modules.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/20260201fosdemgomodjail-librarysandboxingforgomodules-260201225659-76609ec4-thumbnail.jpg?width=640&height=640&fit=bounds)
Making HTML5 Work Everywhere
- 1.
- 2.
- 4. EVP Product Strategy,Telerik 5x Microsoft MVP, ASP Insider, O'Reilly Author
- 5. Session Road Map Understandingthe Evolution Adoption Strategies Applied Techniques Goal: Leave with at least 1 HTML5/CSS3 technique you can use today
- 6. “While it continuesto 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 = RoughGuide Unpredictable Browser Support
- 8. How is theweb evolving?
- 9.
- 10. “Living Standard” WebSockets FileAPI WebGL HTML5Forms Geolocation Offline Canvas Video Audio Canvas Video Geolocation Semantic Tags SVG WHATWG | W3C | IETF
- 11. Where is everywhere? (Whichbrowsers matter?)
- 12. Know your users. Knowyour browsers.
- 13. of internet browseswith IE, FF, Safari, Chrome, or Opera 99%
- 20. IE9 offers supportfor 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 CRPR REC
- 22. In the future, browserscompete on speed, not on features
- 23. In the future, browsersupdate automatically and often
- 24. What is usabletoday?
- 25. X X XX X X X X X X X X X X X Adoption Strategies
- 26. X X XX X X X X X X X X X X X Adoption Strategies X X
- 28. X X XX X X X X X X X X X X X Adoption Strategies X X X X X X X
- 29.
- 30. [Source: Aaron Olaf,Flickr]
- 31. [Source: Mercedes USA,http://mbusa.com/]
- 32. X X XX X X X X X X X X X X X Adoption Strategies X X X X X X X
- 33.
- 34.
- 35. STRATEGY #1 Lowest CommonDenominator
- 36. THANKS FOR ATTENDING! Don’tforget to fill-out your evals. The end.
- 37. 25 26 41 138138 286287303320329337 374378386389390397415430434448 498505 0 100 200 300 400 500 600 relativeHTML5 scores IE10 IE11 HTML5Test.com
- 38. 0 10 20 30 40 50 60 70 80 90 IE6 IE7 IE8IE9 IE10 IE11* FeatureCount Supported HTML5/CSS3 Features As reported by CanIUse.com
- 39. Selectors (2.1) position:fixed 7.0 LocalStorage DragDropAPI 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. (Testfor features.)
- 41.
- 42. Modernizr.[featureName] if (Modernizr.canvas) {//Use It! } .[featureName] || .no-[featureName] .no-canvas { //Styles } .canvas { //Other Styles}
- 43.
- 44.
- 45. 25 26 41 138 303320 329 337 374 378 389 434 0 50 100 150 200 250 300 350 400 450 500 relative HTML5 scores
- 47.
- 48. Not all polyfillsare created equal.
- 49. Old Equivalent Plug-in Backed JavaScript Powered Use legacy versions of samefeature 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*
- 51.
- 52. STRATEGY #3 Graceful Degradation& Progressive Enhancement
- 53.
- 54. Safe WarningCaution • Relieson 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 willyou try today?
- 57.
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)