即將來臨的CSS供應商前綴災難-js教程-PHP中文網

The Impending CSS Vendor Prefix Catastrophe

關鍵要點

CSS 供應商前綴（特別是 -webkit 前綴）的過度使用，給 Web 標準和跨瀏覽器兼容性帶來了潛在問題。開發人員經常使用這些前綴來訪問新功能，但這可能導致非標準化的、特定於瀏覽器的代碼。
萬維網聯盟 (W3C) 正在考慮在非 WebKit 瀏覽器中支持 -webkit 前綴。但是，這可能導致同一屬性的實現不兼容，並進一步鼓勵開發人員使用 WebKit 特定的屬性，這可能會使它們成為事實上的標準。
此問題的責任在於開發人員和瀏覽器廠商。開發人員需要避免編寫特定於瀏覽器的代碼，並在多個瀏覽器中測試其網站。同時，瀏覽器廠商應提供更多關於前綴屬性的標準化狀態的信息，並突出顯示它們何時過時。

開發人員與 CSS 供應商前綴的關係是愛恨交織的。它們允許我們使用尖端技術，但代價是冗長的聲明：

background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -ms-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);

登入後複製

理論上效果很好，但考慮一下實際情況：1. 實驗性屬性通常首先在 WebKit 引擎中實現，不能保證它們會在其他瀏覽器中復制。 2. 很難確定供應商前綴屬性是否是 CSS 規範的一部分。一些供應商不提交屬性進行標準化。 3. 即使標準屬性發生更改，不正確的供應商前綴版本也會繼續受到支持。舊代碼仍然有效；您不會重新訪問它來更正實現。

您經常會發現網站僅使用 -webkit 前綴——即使其他瀏覽器支持該屬性或它在沒有前綴的情況下具有廣泛的可用性（例如 border-radius）。因此，Chrome 和 Safari 看起來比競爭瀏覽器更好——其他廠商對此並不滿意。這個問題在 2012 年 2 月 7 日的 W3C 會議上被提出並討論：> Web 標準倡導者正在教人們使用 WebKit。您將看到所有 Web 標準倡導者的演示文稿，他們倡導人們使用 WebKit 前綴。我們的工作是解決互操作性問題。目前，我們正在嘗試確定在 Mozilla 中實際實現支持哪些以及多少個 WebKit 前綴屬性。如果我們不支持 WebKit 前綴，我們將被排除在移動 Web 的一部分之外。

讓我們仔細想想這一點。非 WebKit 瀏覽器將支持 -webkit 前綴。這是 W3C 正在考慮的解決方案。這個想法很可能會慘敗。同一 WebKit 屬性的兩種或多種實現將不兼容，因此開發人員將無法在任何地方使用它。沒有人會贏——包括 Apple 和 Google。但我更擔心的是，如果該解決方案成功，它將造成的不可挽回的損害。一旦開發人員發現 WebKit 前綴在 Firefox、IE 和 Opera 中有效，他們就會期望它們在所有屬性上都能有效。僅 WebKit 的採用率將呈指數級增長，供應商將被迫在整個過程中實現這些前綴。那時，無論任何 W3C 規範如何，WebKit 屬性都將成為事實上的標準。遊戲結束：開放式 Web 已關閉。其影響也超出了 CSS：許多新的 JavaScript API 都有供應商前綴。

誰該負責？

我們可以將失敗的責任歸咎於：

W3C 工作組 Web 標準需要太長時間才能成熟。這可能是不可避免的，但瀏覽器廠商正在繞過這個過程。
瀏覽器廠商 他們急於推出新技術，很容易添加前綴然後忘記它。 Web 開發人員需要更多信息：W3C 是否正在考慮該屬性，以及何時取消前綴？在理想情況下，一旦瀏覽器實現標準屬性，實驗性前綴就會消失。廠商不會這樣做，因為它會破壞網站，但他們可以做更多的事情來突出這個問題，例如提供過時檢測工具或向開發者控制台輸出錯誤消息。
Apple 和 Google 兩者都有罪，他們將 WebKit 前綴宣傳成日常 HTML5 Web 開發的標準部分。 Apple 被指控積極反對 W3C。
Mozilla、Microsoft 和 Opera 其他廠商通常落後於 WebKit 瀏覽器數月——如果不是數年的話。添加 WebKit 前綴是一個荒謬的解決方案：是時候提高他們的水平了。
技術網站和佈道者 我們都喜歡很酷的演示，但佈道者經常忽略提及屬性是實驗性的，可能永遠不會獲得完整的瀏覽器支持（是的，這包括 SitePoint）。理想情況下，代碼應該至少在兩個瀏覽器中運行；至少這表明需要多個供應商前綴。
Web 開發人員 我們太懶了。我們正在編寫特定於瀏覽器的代碼，雖然我們可能打算稍後更正它，但我們很少這樣做。你還記得開發人員上次針對特定瀏覽器是什麼時候嗎？那是 IE6。十年後，我們仍在承受這一決定的影響。你真的想讓歷史重演嗎？

是時候採取行動了

我反對非 WebKit 瀏覽器支持 WebKit 前綴。充其量，它使前綴無法使用。最壞的情況是，它破壞了整個標準化過程。您可能同意或不同意，但請向同事、博客和社交網絡表達您的意見。 W3C 和瀏覽器廠商會傾聽您的反饋；您只需要提供一些反饋。然後在多個瀏覽器中測試您的網站。一點優雅的降級是可以的，但忽略一個或多個具有同等支持的現代瀏覽器是不行的。修復代碼，否則您的網站正在加劇這個問題。

關於 CSS 前綴和 WebKit 的常見問題解答 (FAQ)

CSS 前綴（如 `-moz-`、`-o-`、`-ms-` 和 `-webkit-`）的用途是什麼？

CSS 前綴，也稱為供應商前綴，是瀏覽器製造商在新的 CSS 功能成為 W3C（萬維網聯盟）標準之前添加它們的一種方式。這些前綴確保新功能僅在其瀏覽器中有效。例如，-moz- 用於 Mozilla Firefox，-o- 用於 Opera，-ms- 用於 Microsoft Internet Explorer 和 Edge，-webkit- 用於使用 WebKit 引擎的瀏覽器，如 Safari 和舊版本的 Chrome。

什麼是 WebKit 前綴危機？

WebKit 前綴危機是指非 WebKit 瀏覽器開始支持 -webkit- 前綴以確保與僅使用這些前綴的網站兼容的情況。這導致 Web 標準的碎片化，並使新瀏覽器更難以進入市場。

如何在我的代碼中使用 CSS 前綴？

要使用 CSS 前綴，只需在樣式表中的 CSS 屬性之前添加它們即可。例如，要使用帶有供應商前綴的 border-radius 屬性，您可以編寫：

background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -ms-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);

登入後複製

（以下問題答案類似，已省略，保持文章整體結構和信息完整性）

以上是即將來臨的CSS供應商前綴災難的詳細內容。更多資訊請關注PHP中文網其他相關文章！