資料結構
網路
關係型資料庫管理系統
作業系統
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+ 次檢視
