資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 HTML 文件中包含 Modernizr？
Modernizr 提供了一種簡單的方法來檢測任何新功能，以便您可以採取相應的措施。例如，如果瀏覽器不支援影片功能，您可能希望顯示一個簡單的頁面。
您可以根據功能的可用性建立 CSS 規則，如果瀏覽器不支援新功能，這些規則將自動應用於網頁。
Modernizr 是一個小型 JavaScript 庫，用於檢測下一代 Web 技術的原生實現的可用性。HTML5 和 CSS3 引入了許多新功能，但與此同時，許多瀏覽器不支援這些新功能。
讓我們進入文章，進一步討論如何在 HTML 文件中包含 Modernizr。
什麼是 Modernizr？
Modernizr 是一小段 JavaScript 程式碼，它會自動檢測使用者瀏覽器中下一代 Web 技術的可用性。Modernizr 使用特性檢測來根據使用者瀏覽器實際的功能輕鬆定製使用者體驗，而不是基於“UA嗅探”來列出整個瀏覽器範圍的黑名單。
有了 Modernizr 提供的這些知識，您可以利用這些新功能在能夠渲染或使用它們的瀏覽器中，同時仍然擁有簡單可靠的方法來控制無法使用的瀏覽器的狀況。它是一組超快速的測試（或者我們喜歡稱之為“檢測”）集合，它們在您的網頁載入時執行，然後您可以使用結果來根據使用者的喜好定製體驗。
一段名為 Modernizr 的簡單 JavaScript 程式碼可以自動確定使用者的瀏覽器是否支援下一代 Web 技術。Modernizr 使用特性檢測來簡化根據使用者瀏覽器實際功能定製使用者體驗的過程，而不是基於“UA 嗅探”的整個瀏覽器類別的黑名單。
有了 Modernizr 提供的資訊，您可以在能夠顯示或使用這些新功能的瀏覽器中利用這些新功能，同時仍然擁有快速可靠的方法來控制無法使用的瀏覽器的狀況。它是一組超快速的測試（或我們稱之為“檢測”）,在您的網頁載入時執行。然後，您可以使用結果來定製您的體驗。
語法
在開始使用 Modernizr 之前，您需要按照如下所示在 HTML 頁面的頭部包含其 JavaScript 庫。
<script src="modernizr.min.js" type="text/javascript"></script>
示例
以下是透過 JavaScript 檢測特定功能的程式：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/3.1.1/modernizr.custom.min.js
"></script>
</head>
<body>
<p>HTML5 Modernizr Browser Check</p>
<script>
if (Modernizr.video) {
alert("HTML5 Video is supported in your browser");
}
else {
alert("HTML5 Video is not supported in your browser");
}
</script>
</body>
</html>
為什麼需要 Modernizr？
每個 Web 開發人員都會遇到瀏覽器和裝置的差異。這主要是因為功能集不同；雖然我們仍然需要支援舊版瀏覽器，但最常用瀏覽器的最新版本能夠實現一些早期瀏覽器無法實現的出色功能。
使用 Modernizr 在支援它們的瀏覽器中利用最新功能，建立分層體驗，而不會放棄那些不太幸運的使用者。
1K+ 瀏覽量
