How to detect Browser feature using Modernizr?

Browser feature detection using Modernizr Plugin

Before discussing about runtime approach using modernizr, we will see couple of browser based approach.

  • Caniuse.com
  • Html5test.com

These websites are useful to identify the browser supports for HTML5 features and related specifications.

Modernizr

Modernizr is ajavascript library. It detects either user browser is supporting HTML and CSS3 features or not. It is very useful to detecting HTML5 and CSS3 features Using this feature detection support, developers can try some alternative approaches to implement the same kind of feature in that unsupported browsers.

First we should embed the Modernizr js file in head section.


<script src="modernizr.js"></script>

To check video feature support in different browsers, we can use the following script.


//Example 1:
if(Modernizr.video == false)
{
//alert("Browser doesn't support HTML5 Video");
}

//Example 2:
To check camvas feature support in different browsers, we can use the following script.
if("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    // show the location on a map by using the Google Maps API
  });
} else {
  // showing static map image
}


You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *