Every month, the 5 Questions blog series follows up on features and columns published in the current issue of MSDN Magazine. This month, I follow up with Brandon Satrom, Microsoft developer evangelist and author of this month's feature on HTML5 development, titled No Browser Left Behind: An HTML5 Adoption Strategy.
Michael Desmond: You recommend feature detection over UserAgent (UA) sniffing, as a way to accurately determine what a connected Web browser will support. Is this approach viable for all extant browsers?
BS: Any tool like Modernizr comes with a host of considerations like overhead, performance and even cost-benefit considerations. On the performance end, Modernizr has both a low overhead in size and in the initialization for your site. Not only is the Modernizr library small (less than 6k for the minified base production version), but it performs nearly all of its work on-demand, if and when you check for support for a given feature. Modernizr.com also provides a custom build option where you can select only the tests and features needed for your site, so the resultant script file is as small as possible.
MD: From a broader perspective, do you have any advice for organizations intending to rely on Modernizr to enable HTML5 support? Are there certain features of HTML5 that might be problematical or issues related to potential movement in the formative HTML5 spec?
The bottom line: Figure out what HTML5 features you want to use, what using them will do to a user with an older browser, and if you want to add that feature to older browsers via a shim. If, based on that assessment, you think a feature detection solution will help you, use Modernizr and be sure to pay attention to revision and improvements to it and any of the Polyfills you choose to adopt.
MD: Your mapping example showing graceful degradation is enlightening. But it does bring up the question: Are there situations where it is better to degrade gracefully, rather than attempt to mimic HTML5 via polyfills? Are there any guiding rules that help developers make these decisions?
BS: This is a fantastic question. I think the choice of degrading versus polyfilling for any developer would probably be based on some combination of the following factors: One, is the feature in question essential to the user experience of the site, or just a nice to have? Many CSS3 modules like border-radius probably fall into this category. Two, is a well-supported, robust polyfilling solution available, such as the jQuery Corners Plugin or PIE for CSS3 features? And three, does the polyfilling solution provide a faithful implementation of the feature, or is it merely a loose approximation?
MD: What are some of the biggest misconceptions about HTML5 in the developer community? And what are some misconceptions about Microsoft’s stance with regard to HTML5?
As for Microsoft, I think the biggest misconceptions are that we aren’t: a) adopting Web standards (HTML5); b) adopting Web standards fast enough; or, c) adopting the given set of standards that a given developer deems most important. To be fair, I think this is a criticism that is leveled at just about every browser vendor by everyone, so we’re not alone in that.
But the truth is, IE9, was a huge leap forward for Microsoft’s commitment to Web standards in the browser. We implemented a ton of great features like canvas, SVG, Geolocation, semantic markup, a bevy of CSS3 modules and more. But we didn’t stop there. IE9 was also a work in progress, which is why we followed up with the first Platform Preview of IE10 less than two months after the release of IE9 (we’re now on Preview 2, by the way). It’s easy to look just at the current RTM’ed browser and form an incomplete conclusion about Microsoft’s commitment to Web standards, but the full picture can only be seen when you look at IE9, the IE10 Platform Preview, IE Test Center and HTML5Labs.com.