用CSS媒體查詢切割芥末

核心要點

• “Cutting the Mustard” 技術利用 JavaScript 檢測瀏覽器功能，然後加載額外的 CSS 和 JavaScript 以提供增強的用戶體驗；否則，僅加載核心體驗所需的必要文件。
• 作者建議使用 CSS 媒體查詢根據瀏覽器的功能有條件地加載樣式表，從而避免使用 JavaScript，並防止舊版瀏覽器加載針對新版瀏覽器設計的樣式表。
• 作者提出了一種方法，通過在body 元素上使用無害的非默認CSS 屬性，並使用JavaScript 和getComputedStyle 來確定該屬性是否已設置，從而僅在受支持的瀏覽器中加載或運行腳本。
• 作者提供了結合所有討論技術的最終代碼，演示了一種檢測相對較新的瀏覽器並防止舊版瀏覽器應用樣式或運行腳本的方法，從而允許開發人員專注於為較新的瀏覽器構建功能。

“Cutting the Mustard” 是 BBC 的 Tom Maslen 創造的一個術語。此方法使用 JavaScript 檢查瀏覽器功能，然後加載更多 CSS 和 JavaScript 以提供“增強型”體驗；否則，瀏覽器將僅加載“核心”體驗所需的必要文件。

最近對“Cutting the Mustard” 的興趣激增，例如《通過“Cutting the Mustard” 遷移到 Flexbox》和《服務器端 Mustard Cut》，以及更廣泛的漸進增強。

改進方法

然而，根據我的經驗，即使是非常基本的“核心”體驗也可能在某些非常舊的瀏覽器上造成問題，因此我想在此基礎上進行改進，看看是否有可能完全拒絕非常舊的瀏覽器使用任何CSS，只留下HTML。

當然，顯而易見的解決方案是使用JavaScript 有條件地加載所有CSS（如果瀏覽器通過“Cutting the Mustard” 測試），但這對我來說感覺過於粗暴；無法加載JavaScript 的現代功能強大的瀏覽器將因完全沒有樣式而受到懲罰。因此，我尋找了一種僅使用 CSS 的方法來解決這個問題，我找到了 Craig Buckler 的一篇舊文章。經過大量的實驗和調整後，我想出了以下方法：

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

讓我們來分析一下這裡發生了什麼。

工作原理

第一個 <link> 元素的媒體查詢僅允許在以下瀏覽器中加載樣式表：

• IE 9
• FF 8
• Opera 12
• Chrome 29
• Android 4.4

第二個 <link> 元素的媒體查詢僅允許在以下瀏覽器中加載樣式表：

• Chrome 29
• Opera 16
• Safari 6.1
• iOS 7
• Android 4.4

結合使用時，除非瀏覽器是以下瀏覽器，否則此技術不會加載樣式表：

• IE 9
• FF 8
• Opera 12, 16
• Chrome 29
• Safari 6.1
• iOS 7
• Android 4.4

注意：無論有多少 <link> 元素，樣式表都只加載一次。

可以通過逗號分隔聲明，將媒體查詢組合到一個 <link> 元素中，如下所示：

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

但是，我個人更喜歡將它們分開，因為我發現更容易看出發生了什麼。

因此，如果您以語義化和可訪問的方式構建標記，舊版瀏覽器仍然能夠以純 HTML 查看您未設置樣式的內容。

這當然是非常主觀的，但我的觀點是，仍然使用這些瀏覽器的任何人都應該能夠獲得他們需要的內容。很有可能，通過為這些瀏覽器提供針對較新瀏覽器的 CSS，某些內容會中斷，這可能意味著頁面完全無法使用。使用此方法，他們至少可以獲得一個乾淨的頁面。更重要的是，您將永遠不需要再次在這些瀏覽器中進行測試。您已經完成了！至少，理論上是這樣。

當然，您的支持需求可能會有所不同，但此技術的優點在於您可以在此基礎上進行構建。例如，如果您需要添加對 IE8 的支持，您可以使用條件註釋僅為該瀏覽器加載相同的樣式表：

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

或者，如果您需要支持像素比率大於 1 的舊版 WebKit 設備，您可以添加另一個具有目標媒體查詢的 <link> 元素，如下所示：

<code class="language-html"><!--[if IE 8]>
  <link rel="stylesheet" href="css/your-stylesheet.css">
<![endif]--></code>

就其本身而言，這只會為Android 2.2 加載樣式表（我無法測試早期版本），但由於它除了其他<link> 元素之外還包含在內，因此它實際上只是為這組其他瀏覽器添加了支持。

您還可以更改此處我提供的 <link> 元素的主要媒體查詢，以獲得您需要的自定義支持。但是，要做到這一點需要大量的測試，所以請注意！

“但是，它們是 hack！”

是的，我想它們是，但這取決於您的定義。媒體查詢旨在測試瀏覽器功能，然後再應用 CSS，而這正是我們在此案例中想要做的，儘管是間接的。

儘管如此，無論是否是 hack，我都對這項技術感到滿意，並且在我的所有測試中它都運行良好，我計劃很快將其用於生產站點。

無效之處

在我迄今為止進行的所有測試中，我只發現了一種情況，即事情沒有按預期工作。在 Android 4.4 上，UC 瀏覽器對媒體查詢沒有響應。據我所知，UC 瀏覽器使用的是舊版 WebKit，這可以解釋這種情況。

如果您想支持此瀏覽器，可以使用少量用戶代理嗅探來強制加載 CSS：

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

作為獎勵，據我所知，無法在 Android UC 瀏覽器中禁用 JavaScript，因此樣式表應始終加載，除非網絡故障等。

當然，如果您發現需要支持其他特定瀏覽器，您可以隨時添加到用戶代理嗅探條件中，但我建議您謹慎使用它，因為它違背了這是一種僅限CSS 技術的目的。

我製作了一個測試頁面來在不同的瀏覽器上測試基本方法。如果您發現任何瀏覽器無法按預期工作，或者如果您發現任何其他可以為特定瀏覽器或瀏覽器範圍添加支持的媒體查詢，請在評論中告訴我或在 GitHub 存儲庫中提出問題。

加載腳本？

好的，如果您使用 CSS 來檢測瀏覽器支持，那麼您很可能希望僅在您支持的瀏覽器中加載或運行部分或全部腳本。那麼我們該如何做到這一點呢？

好吧，有幾種方法可以實現這一點，但我發現最簡單的一種方法如下：

• 在樣式表中，在 body 元素上插入一個無害的非默認 CSS 屬性。
• 使用 JavaScript 和 getComputedStyle 在 body 元素上確定您的屬性是否已設置。
• 如果已設置，則運行或加載其他 JavaScript。

例如，clear 屬性的默認值為 none。將其設置為 body 的 both 幾乎不會對頁面的顯示產生任何影響（如果確實如此，則必須使用其他屬性）。因此，代碼在您的樣式表中將如下所示：

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

在您的頁面（或腳本文件中）：

<code class="language-html"><!--[if IE 8]>
  <link rel="stylesheet" href="css/your-stylesheet.css">
<![endif]--></code>

最終代碼

無論是否是hack，我試圖在此處展示的是一種可重用的方法，用於檢測相對較新的瀏覽器並防止舊版瀏覽器應用樣式或運行腳本，從而導致它們僅顯示頁面的HTML。所需的代碼非常少，它應該允許您專注於使用更現代的技術為更現代的瀏覽器構建精彩的功能，而無需擔心。

儘管您可能不需要我在這裡提供的所有內容，但將所有部分放在一起會得到以下結果：

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:1.1)"></code>

我已經製作了另一個包含所有額外內容的測試頁面（SitePoint 偶爾會刪除在單獨的HTML 頁面上託管的多年曆史的演示。我們這樣做是為了降低過時代碼（具有公開漏洞）對用戶構成風險的風險。感謝您的理解。）。

致謝

如果沒有 BrowserStack、Can I Use 以及 Browserhacks 和 Jeff Clayton 的工作人員的工作，我將無法做到這一點，因此感謝所有參與的人，如果您有任何想法或反饋，請告訴我。

關於 CSS 媒體查詢和“Cutting the Mustard” 的常見問題解答 (FAQ)

“Cutting the Mustard” 在 CSS 媒體查詢中的含義是什麼？

在 CSS 媒體查詢的上下文中，“Cutting the Mustard” 用於描述一種技術，其中網站或 Web 應用程序會在提供完整體驗之前檢查用戶的瀏覽器是否支持某些功能。如果瀏覽器無法“Cutting the Mustard”，則會提供更簡單、更基本的網站或應用程序版本。這種方法確保所有用戶都可以訪問網站的內容，而不管其瀏覽器的功能如何。

如何確定瀏覽器是否“Cutting the Mustard”？

要確定瀏覽器是否“Cutting the Mustard”，您可以使用簡單的 JavaScript 測試。此測試檢查瀏覽器是否支持某些功能，例如 querySelector 和 localStorage。如果瀏覽器通過測試，則認為它“Cutting the Mustard”，並且可以處理網站或應用程序的完整體驗。

為什麼“Cutting the Mustard” 技術很重要？

“Cutting the Mustard” 技術很重要，因為它確保您的網站或 Web 應用程序可供所有用戶訪問，而不管其瀏覽器的功能如何。通過向無法“Cutting the Mustard” 的瀏覽器提供更簡單的網站版本，您可以確保所有用戶都可以訪問您的內容。

我可以在沒有 JavaScript 的情況下使用 CSS 媒體查詢嗎？

是的，您可以在沒有 JavaScript 的情況下使用 CSS 媒體查詢。但是，將 JavaScript 與 CSS 媒體查詢結合使用，您可以根據用戶的瀏覽器功能為用戶提供更量身定制的體驗。

“Cutting the Mustard” 測試中可能檢查的一些功能示例是什麼？

“Cutting the Mustard” 測試可能會檢查諸如 querySelector、localStorage 和 addEventListener 之類的功能。這些都是現代瀏覽器支持的功能，但在舊版瀏覽器中可能不可用。

如何在我的網站或 Web 應用程序中實現“Cutting the Mustard” 測試？

要實現“Cutting the Mustard” 測試，您可以使用一個簡單的 JavaScript 測試來檢查某些功能。如果瀏覽器通過測試，則可以使用 CSS 媒體查詢來提供網站或應用程序的完整體驗。

如果瀏覽器無法“Cutting the Mustard” 會發生什麼？

如果瀏覽器無法“Cutting the Mustard”，它將獲得更簡單、更基本的網站或應用程序版本。這確保了所有用戶都可以訪問您的內容，而不管其瀏覽器的功能如何。

我可以自定義為無法“Cutting the Mustard” 的瀏覽器提供的體驗嗎？

是的，您可以自定義為無法“Cutting the Mustard” 的瀏覽器提供的體驗。您可以使用 CSS 媒體查詢為這些瀏覽器定製網站或應用程序的設計和功能。

使用“Cutting the Mustard” 技術有什麼缺點嗎？

使用“Cutting the Mustard” 技術的一個潛在缺點是，它需要額外的開發時間來創建和測試網站或應用程序的簡化版本。但是，確保所有用戶都可以訪問內容的好處通常超過了這個缺點。

“Cutting the Mustard” 技術在今天仍然相關嗎？

是的，“Cutting the Mustard” 技術在今天仍然相關。雖然現代瀏覽器支持各種各樣的功能，但仍然有許多用戶使用可能不支持這些功能的舊版瀏覽器。通過使用“Cutting the Mustard” 技術，您可以確保您的網站或應用程序可供所有用戶訪問。

以上是用CSS媒體查詢切割芥末的詳細內容。更多資訊請關注PHP中文網其他相關文章！