One 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. 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
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
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
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
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
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
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.
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.
WHATWG FAQs on Living Standard: http://wiki.whatwg.org/wiki/FAQ#What_does_.22Living_Standard.22_mean.3F
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
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
[Audience Prompt]
Specific browsers (and versions) your users are using are what matter.
DISNEY SPEAKING NOTE: Emphasize the difference in Chrome shipping schedules that produces so many browser versions.
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
What is the IE strategy for HTML5/CSS3?
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
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
Sun Spider benchmark test:http://www.webkit.org/perf/sunspider/sunspider.html
Sun Spider benchmark test:http://www.webkit.org/perf/sunspider/sunspider.html
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.
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
Strategy: Design for lowest common denominator, Enrich/Enhance as more capabilities are availableImage Source: http://www.flickr.com/photos/aaronolaf/833342657/
Strategy: Design for best case scenario (premium features), and gracefully remove features as resources are not availableImage Source: http://www.mbusa.com/mercedes/index
I want it now!How do you use HTML5 today?
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
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.
http://www.modernizr.com/
http://www.modernizr.comhttp://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/Modernizr now ships with ASP.NET MVC 3
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