HTML - Modernizr

Modernizr 是一個小型 JavaScript 庫，用於檢測使用者瀏覽器中是否存在特定 Web 技術的功能。它提供了一種簡單的方法來檢測任何新功能，以便我們可以根據瀏覽器的功能採取相應的措施。例如，如果瀏覽器不支援影片功能，則可以顯示一條簡單的訊息。我們還可以根據功能可用性建立 CSS 規則，如果瀏覽器不支援新功能，這些規則將自動應用於網頁。

在開始使用 Modernizr 之前，我們需要在 HTML 頁面標題中包含其 JavaScript 庫，如下所示：

<script src="modernizr.min.js" type="text/javascript"></script>

示例

以下是處理支援和不支援功能的簡單語法：

<!-- In your CSS: -->
.no-audio #music {
   display: none; <!-- to not show Audio options -->
}
.audio #music button {
  <!-- Style the Play and Pause buttons nicely -->
}

<!-- In your HTML: -->
<div id="music">
   <audio>
      <source src="audio.ogg" />
      <source src="audio.mp3" />
   </audio>
   
   <button id="play">Play</button>
   <button id="pause">Pause</button>
</div>

值得注意的是，對於瀏覽器不支援的功能，您需要在每個功能/屬性前新增“no-”字首。

以下程式碼片段可以新增到透過 JavaScript 檢測特定功能：

if (Modernizr.audio) {
   <!-- properties for browsers that
   support audio -->
}

else{
   <!-- properties for browsers that
   does not support audio -->
}

Modernizr 檢測到的功能

以下是 Modernizr 可以檢測到的功能列表：