Before going to runtime Approach using modernizr, we will see some browser profiling approach.
Browser profiling approach:
1. caniuse.com
2. html5test.com
Note: These sites are useful to know the support of HTML5 & CSS3 features in various browsers & cross platforms.
Runtime approach using Modernizr:
Modernizr is one of jquery library. Like if any particular browser is not supported any html5 feature, it will go for an alternative approach to achieving the same feature using different tag.
We can consider html5 Video Tag for this example. if any browser is not supported video tag, I wish to show for some alternative approach using modernizr. So i can use embed tag instead of video.
HTML:
Script:
Embed Modernize.js
Browser profiling approach:
1. caniuse.com
2. html5test.com
Note: These sites are useful to know the support of HTML5 & CSS3 features in various browsers & cross platforms.
Runtime approach using Modernizr:
Modernizr is one of jquery library. Like if any particular browser is not supported any html5 feature, it will go for an alternative approach to achieving the same feature using different tag.
We can consider html5 Video Tag for this example. if any browser is not supported video tag, I wish to show for some alternative approach using modernizr. So i can use embed tag instead of video.
HTML:
div id="video1">
<video id="Video" controls autoplay oncontextmenu="return false;">
<source src="dance.webm"/>
</video>
</div>
Script:
Embed Modernize.js
if(Modernizr.video == false)
{
//alert("Browser doesn't support HTML5 Video");
var videoElement = document.getElementByID("video1");
videoElement.innerHTML = "";
var embedElement = document.getElementByID("embed");
embedElement.setAttribute("src", "dance.swf");
videoElement.appendChild(EmbedElement);
}
Explanation:
In the above example, IE 8 does not support html5 video tag feature. So it will replace video tag with an "embed" tag in IE8.Also ".webm" video format does not support in IE. So we can display embed tag instead of video tag using this approach.
