具有跨瀏覽器兼容性的功能檢測的CSS（二）

各瀏覽器支持的方法

優雅降級與漸進增強

開發人員通常使用兩種極端相反的開發理念來抵制不均衡的瀏覽器支持，並確保用戶在所有瀏覽器中享有一定程度的一致性：優雅降級和漸進增強。

• 優雅降級意味著構建您的網站具有最新現代瀏覽器支持的全部功能和設計功能，然後逐步向下編碼，通過剝離一層又一層，降級增強版本來為舊版瀏覽器提供支持。該網站的較低版本被剝奪了其增強功能和UI功能，但仍向用戶提供基準版本。
• 漸進增強與優雅降級完全相反。首先，創建網站的基本/基線版本，然後逐漸向上移動，為現代瀏覽器和更新版本添加高級功能和外觀功能，以提供功能豐富的體驗。

逐步增強被廣泛認為是兩者中的更好方法，因為它從基本版本開始，並在以後添加進一步的增強。它保證網站可以在任何瀏覽器中使用，無論是新的還是舊的，並且將在所有自動支持它的瀏覽器中呈現高級版本。它也被認為有利於搜索引擎的測試和爬取。

在JavaScript，Ruby和PHP等語言中，遇到錯誤時會終止執行。另一方面，CSS有一個名為“Fault Tolerance”的功能。每當瀏覽器遇到無法解釋或理解的CSS代碼行時，它就會忽略並跳過該行代碼並跳轉到下一行。例如，考慮一下這個例子。

我們選擇元素div並將color屬性更改為十六進制值“＃777”

由於我們已將“#ccc”中的顏色屬性值設置為“＃000”，因此將使用第二個值。現在，如果我們使用無效的屬性值，CSS將使用其容錯功能，並將忽略它無法解釋的CSS行。

因為foobar(10)不是有效的CSS值，瀏覽器無法解釋此行，因此它只是忽略它。保留顏色值“＃777”。

我們可以利用CSS的這種容錯功能來編寫回退屬性。使用這種技術，您不需要沉迷於創建兩個單獨的文件或編寫令人困惑的條件語句的麻煩。您的網站不必發送兩個單獨的HTTP請求，首先是現代CSS文件，然後是IE修復文件，如下例所示：

現在我們已經討論了跨瀏覽器兼容性問題，現在讓我們來看看克服這一挑戰的方法。我們將討論的兩個主要方法是：

1. 瀏覽器檢測
2. 特徵檢測

1.瀏覽器檢測

瀏覽器標識基於檢測用戶代理字符串

。該NavigatorID.userAgent屬性返回當前瀏覽器的用戶代理字符串。用戶代理請求標頭包含一個特徵字符串，允許標識應用程序類型，操作系統，軟件供應商或軟件版本等。

語法

var ua = window.navigator.userAgent;

Where ua存儲當前瀏覽器的用戶代理字符串值。

例如，這是Firefox UA字符串：

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

以下是常見Web瀏覽器的用戶代理字符串 -

最常見的方法是使用JavaScript查詢用戶代理標頭：

IE條件語句

檢測或識別瀏覽器的另一種方法是使用Internet Explorer的條件註釋。此語法擴展了標準HTML註釋，並且是IE獨有的。

條件語句是Internet Explorer特定的CSS規則，即它們僅被Internet Explorer識別並被所有其他瀏覽器忽略，因為它們將它們視為普通註釋。請注意，在第二種情況下（目標除IE之外的其他瀏覽器），內容不在註釋中。因此，它將被其他瀏覽器識別。

• 用戶代理進行瀏覽器檢測的最大缺點是開發人員需要不斷跟蹤瀏覽器支持。此外，瀏覽器檢測不考慮新的瀏覽器版本更新。新的瀏覽器版本可能支持以前不受支持的功能，使您的額外代碼冗餘，或者新版本可能會刪除對可能破壞您網站性能的功能的支持。
• 即使新版本的瀏覽器可能支持該功能，也會顯示後備代碼。
• 某些瀏覽器還使用虛擬用戶代理來屏蔽原始內容。
• 許多瀏覽器也開始欺騙用戶代理字符串。隨著時間的推移，用戶代理檢測中出現了一些嚴重的缺陷，因為IE從10版及更高版本中刪除了對它的支持。

特徵檢測

一種更好的瀏覽器檢測方法稱為“特徵檢測”。具有特徵檢測的CSS運行測試以確定當前瀏覽器是否支持所討論的給定特徵，然後有條件地運行不同的代碼，具體取決於它是否執行或不執行噸。具有特徵檢測的CSS涉及測試瀏覽器是否能夠運行給定的代碼行，並且根據測試的結果，運行由瀏覽器支持的特定代碼塊，從而產生接近完美的一致性和跨瀏覽器兼容性。

這樣，無論用戶使用哪種瀏覽器，您都可以確保瀏覽器可以提供無縫且一致的用戶體驗。開發人員不必擔心跟蹤繁瑣的瀏覽器支持圖表和新版本更新。結合漸進增強的理念，開發人員首先對網站進行編碼，以提供所有瀏覽器支持的基本版本，並根據新現代瀏覽器中的支持繼續添加圖層。如果您不遵循CSS的功能檢測方法，那麼不支持這些功能的瀏覽器將無法按預期顯示您的網站，並且會帶來糟糕的用戶體驗。除了提供跨瀏覽器兼容的CSS之外，它還可以幫助開發人員通過避免混亂的多行回退來編寫乾淨可讀的CSS。

瀏覽器檢測和特徵檢測比較

請考慮以下測試方案。在這兩種情況下，我們都準備好了缺少瀏覽器支持的後備。

左：瀏覽器檢測，右：特徵檢測

如果瀏覽器配置已知並且用戶代理按預期工作，即成功檢測，則兩種方法都有效。

但是，當瀏覽器配置未知或不正確時，瀏覽器檢測方法會完全失敗，無法正確呈現頁面。另一方面，特徵檢測以更加無縫的方式處理這一挑戰。具有特徵檢測的CSS運行測試並確定瀏覽器能夠顯示功能A，但是當它無法支持功能B時，它只依賴於功能B的後備併成功地以開發人員想要的方式呈現頁面。

CSS特徵檢測

@supports功能查詢

開發人員可以使用多種工具來實現跨瀏覽器兼容性，如Modernizr和polyfill。我們可以通過使用CSS功能查詢來實現相同的結果，而不是使用第三方工具。這些是條件規則，允許我們根據瀏覽器支持將不同的樣式應用於同一元素。功能查詢類似於@ media，@ document或@import條件語句。與使用基於屏幕大小的條件的@media查詢不同，功能查詢基於瀏覽器的CSS支持創建條件。如果瀏覽器理解並支持要素查詢中的屬性，則將應用查詢括號內的所有CSS樣式規則。否則，它將被忽略並跳過。

@supports規則

@supports是一個條件組規則，用於測試瀏覽器是否支持CSS屬性值對。瀏覽器執行跨瀏覽器測試以檢查是否支持某個CSS屬性或值。結果確定是否應用了一段CSS代碼。語法類似於媒體查詢，但我們將CSS聲明設置為驗證跨瀏覽器兼容CSS的測試條件，而不是媒體查詢。瀏覽器根據該條件執行CSS樣式。

@supports語法

例：

請考慮以下涉及vmax width屬性的示例：

@supports查詢測試用戶瀏覽器是否支持vmax。如果支持，則容器的高度將設置為100vmax，否則，如果不支持該功能，則容器的高度將設置為100％。

另一個測試瀏覽器是否支持CSS網格的示例。

在支持網格功能的瀏覽器中，div元素的背景顏色將設置為綠色（因為條件解析為true），而對於不支持網格的瀏覽器，div的背景將設置為黃色。

@supports 邏輯運算符

我們可以使用多個邏輯運算符來增強@supports功能以創建複雜的條件測試

(a). not 運算符

(b). And 運算符

(c). Or 運算符

支持使用Javascript進行檢測

功能查詢也可以與JavaScript一起使用。JavaScript提供了 CSS.supports() 方法可以通過兩種方式實現的方法：

1. CSS.supports（propertyName.value）;
2. 例： CSS.supports("text-decoration-style", "blink");
3. CSS.supports（testCondition）;
4. 例： CSS.supports("display: flex");

瀏覽器支持功能查詢

使用@supports功能查詢的一個難點是在一些舊的古老瀏覽器中缺乏瀏覽器支持。

沒有版本的Internet Explorer（包括版本11）支持功能查詢。Safari推出了對功能查詢的支持，但僅限於最新版本。但必須注意的是，如果瀏覽器無法識別@supports規則，CSS會優雅地降級，它只會忽略整個代碼塊而不會破壞網頁。因此，最好的方法是首先編寫每個瀏覽器可以處理的基本CSS樣式。然後使用@supports功能查詢來覆蓋具有更高級功能和外觀的基本樣式，以便處理這些功能的現代瀏覽器。

一些尋求IE瀏覽器支持的開發人員更喜歡使用Modernizr，Post-CSS和其他polyfill等工具來滿足他們的跨瀏覽器兼容性需求。

使用Modernizr進行CSS特徵檢測

Modernizr是一個非常有用的JavaScript庫，有助於在用戶的瀏覽器中自動檢測下一代HTML和CSS功能的可用性。Modernizr不依賴於用戶代理嗅探，而是依賴於CSS特徵檢測，以允許開發人員根據用戶的瀏覽器功能提供特定的用戶體驗。它在用戶的瀏覽器上運行測試，以檢查它是否支持特定功能。如果該功能被視為“不受支持”，則開發人員可以提供適當的腳本或功能來模仿不受支持的功能。與使用@supports功能查詢的CSS功能檢測不同，Modernizr還允許構建自定義測試。

Modernizr與特徵查詢

Modernizr幾乎所有可以想象的瀏覽器都支持，不像功能查詢，任何Internet Explorer版本都不支持，包括11.排除IE後，功能查詢已經被廣泛實現，佔全球用戶的91.68％。與瀏覽器本機支持的功能查詢不同，Modernizr需要首先下載並在JavaScript中執行，這會降低頁面加載速度並影響排名子SERP。Modernizr仍然沒有覆蓋像@support查詢那樣的完整CSS屬性。

跨瀏覽器測試是不可或缺的

如果開發人員甚至無法檢測到跨不同瀏覽器和瀏覽器版本的渲染問題，那麼通過使用功能查詢功能檢查或單獨使用Modernizr來實現跨瀏覽器兼容性是不可思議的。您驗證網站的瀏覽器和瀏覽器版本越多，您的UI就越健壯。這不僅有助於為您的客戶提供無縫體驗，還有助於為開發人員提供成就感和寬慰。這就是使用跨瀏覽器測試工具至關重要的原因。如果沒有跨瀏覽器測試，開發人員將無法驗證他們為實現瀏覽器兼容性所做的更改是否按預期工作。

結論

毫無疑問，跨瀏覽器兼容性是Web開發不可或缺的維度，不能再被忽視。然而，與流行的看法相反，網站不需要在每個瀏覽器上看起來和功能完全相同。至關重要的是要理解完全的100％兼容性根本無法實現。因此，每個開發人員的關鍵目標應該是使他們的網站可以在不同的瀏覽器上訪問，併為儘可能多的用戶提供愉快，無縫的查看體驗。到目前為止，開發人員社區依靠JavaScript（尤其是Modernizr）來解決他們的跨瀏覽器兼容性問題。但是最近CSS功能檢測已經成為一種可行的，輕量級的。