Modernizr是一套 JavaScript 函式庫，用來偵測瀏覽器是否支援像HTML5與CSS3等技術
使用之前，要先引入Modernizr的js和jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="modernizr.js"></script>
Modernizr常見用法有兩種，一種是透過Javascript利用Modernizr的物件判斷是否支援
$(document).ready(function() {
if (Modernizr.input.placeholder) {
alert("支援");
} else {
alert("不支援");
}
if (Modernizr.webworkers) {
alert("支援");
} else {
alert("不支援");
}
if (Modernizr.websockets) {
alert("支援");
} else {
alert("不支援");
}
});
另一種則是透過Modernizr插入的class，透過CSS來處理是否支援
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="modernizr.js"></script>
<style type="text/css">
.test {display:none;}
.websockets .yes {display:block;}
.no-websockets .no {display:block;}
</style>
</head>
<body>
<div class="test yes">
<p>支援</p>
</div>
<div class="test no">
<p>不支援</p>
</div>
</body>
</html>