From http://caniuse.com/
From http://caniuse.com/
From http://caniuse.com/
A polyfill is a browser fallback, made in javascript, that allows functionality you expect to work in modern browsers to work in older browsers.
Project URL: https://github.com/aFarkas/html5shiv
The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
article,aside,figcaption,figure,footer,header,hgroup,main,nav,section
<!--[if lt IE 9]>
<script src="path/to/html5shiv.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="path/to/html5shiv-print.js"></script>
<![endif]-->
Project at http://afarkas.github.com/webshim/demos/
<!-- dependencies: jQuery + Modernizr with yepnope -->
<script src="js/jquery-1.7.1.js"></script>
<script src="js/modernizr-yepnope-custom.js"></script>
<!-- reference the base script -->
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//implement all unsupported features || call polyfill before DOM-Ready to implement everything as soon and as fast as possible
$.webshims.polyfill();
//or load only specific features you need
//$.webshims.polyfill('forms json-storage');
$(function(){
//use all implemented API-features on DOM-ready
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Video including polyfill</title>
<script src="scripts/jquery-1.8.2.min.js"></script>
<script src="scripts/modernizr-custom.js"></script>
<script src="scripts/webshim/polyfiller.js"></script>
<script>
$.webshims.polyfill('mediaelement');
</script>
</head>
<body>
<video width="480" height="360" controls="controls">
<source src="Video.mp4" type="video/mp4">
<source src="Video.webm" type="video/webm">
</video>
</body>
</html>
is a JavaScript Library that let you detect the features a browser supports.
<!DOCTYPE html>
<html>
<head>
<script src="modernizr.min.js"></script>
</head>
<body>
</body>
</html>
<html class=“js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”>
.no-borderradius .box {
border: solid 2px blue;
}
.borderradius .box {
border: solid 1px blue;
border-radius: 20px;
}
Modernizr.canvas
Modernizr.inputtypes.search
Daniel Holmlund
@tizenman