HTML5Shiv允許就瀏覽器識別出HTML5元素，並可以爲其添加樣式—-它只是簡單地創建了HTML5對象，讓CSS和JavaScript可以應用在元素本身。Modernizr做了同樣的事情，並且在此基礎上還添加了特性檢測。它會告訴你特徵存在與否，該怎麼處理還是開發者自己決定的。
HTML5Shiv會使像<video>這樣的標籤生效，但是它並不會使HTML5的視頻在就瀏覽器得以播放。雖然這個標籤是可用的，並能夠添加樣式，然而視頻並不能在這些瀏覽器裏播放。Modernizr不僅能夠讓video標籤可用，並且能夠爲不支持該特性的瀏覽器提供備選方案。在視頻例子中，你能夠用Modernizr在不支持視頻的瀏覽中降級爲使用Flash去播放視頻。（直接提醒用戶升級瀏覽器吧。。。）
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="modernizr-2.8.3.min.js"></script>
</head>
<body>
<span class="span-svg">support</span>
<span class="span-no-svg">not support</span>
<script>
if(Modernizr.svg) {
alert(1)
} else {
alert(2);
}
</script>
</body>
</h在head標籤中添加modernzr的script，並且在html標籤上添加類 “no-js”。在瀏覽器打開，可以發現，html標籤上添加了很多類。如果瀏覽器支持該特性（比如svg），就會在html標籤添加類svg；如果不支持svg，就會添加類no-svg。其他特性也是如此。所以我們就可以根據不同的類定製樣式。
.svg span {display: none;}
.svg .span-svg {display: inline;}
.no-svg .span-no-svg {display: inline}此外，可以在腳本中檢測modernizr支持的特性，以便動態生成頁面。腳本中生成了一個全局變量Modernizr。如果支持該特性，返回值是true；不支持時返回值是false。
if(Modernizr.svg) {
} else {}另外一個有用的特性是Modernizr.load和yepnope，後者是一個資源加載器，默認集成在modernizr中。
<script>
Modernizr.load({
test: Modernizr.svg,
yep: 'svg.css', //支持該特性，加載資源
nope: 'no-svg.css' //不支持該特性，加載資源
})
// 測試多個的寫法
Modernizr.load([
{
test: Modernizr.svg,
yep: ['svg.css', 'svg.js'],
nope: 'no-svg.css'
},
{
test: Modernizr.opacity,
yep: ['opacity.css', 'opacity.js'],
nope: 'no-opacity.js'
}
])
</script>