In this months’ MSDN magazine there is an interesting article on Browser and Feature Detection. What really caught my eye was the piece on Modernizr, the JavaScript library that implements browser feature detection.
Modernizr has built-in detection for most HTML5 and CSS3 features that’s very easy to use in your code. It’s very widely adopted and constantly enhanced. Both Modernizr and jQuery are shipped with the ASP.NET MVC tools.
As HTML5 and CSS3 become more and more prevalent feature detection is increasingly relevant.
A growing number of ready-made “fallbacks” for many HTML5 features, known as shims and polyfills, can ease that burden. These come in the form of CSS and JavaScript libraries or sometimes even as Flash or Silverlight controls that you can use in your project, adding missing HTML5 features to browsers that don’t otherwise support them. The difference between shims and polyfills is that shims only mimic a feature and each has its own proprietary API, while polyfills emulate both the HTML5 feature itself and its exact API. So, generally speaking, using a polyfill saves you the hassle of having to adopt a proprietary API. The HTML5 Cross Browser Polyfills collection on github contains a growing list of available shims and polyfills.
As .Net developers we are usually insulated from browser incompatibility issues, however, there may be situations where you are not using the .Net framework. There is a good example of using yepnope (a conditional resource loader) for HTML5 Form Validation at CSSKarma. I tweaked and re-implemented the example using a .Net MVC application which you can see below. A couple of “gotchas”:
· Modernizr is part of the .Net MVC tools that come from Microsoft, however, yepnope is not in the release of the MVC tools that at least I have on my machine. You will need to download version 2.0 from modernizr.comto get yepnope support.
· The JQuery syntax for working with YepNope takes some getting used to. Make sure to load JQuery first.
· Visual Studio 2010 does not seem to know about HTML5 and will warn of a validation when you use its attributes. See figure #2.
![clip_image002[4]](http://innovate2.files.wordpress.com/2011/11/clip_image0024.jpg "clip_image002[4]")
Figure 1 – MyValidation.js – based on the example at CSSKarma
Figure 2 – HTML5 Source
Figure 3 – Output
References:
Posted by scooter998 
