是時候重新考慮CSS中的供應商前綴的時間

關鍵要點

• CSS 中-webkit- 前綴的廣泛使用導致某些網站在沒有它時無法正常運行，迫使Mozilla 為了提高Firefox 與使用-webkit 前綴的網頁的兼容性而支持非標準的-webkit- 前綴，這與Microsoft Edge 和Opera 的做法一致。
• 建議開發人員重新考慮他們對前綴的使用方法，並測試其網站的兼容性，特別是那些省略了-moz- 前綴的網站，因為新的更改可能會影響其網站在Firefox 46 或47 上的性能。
• 隨著 Chrome/Blink、Firefox 和 Microsoft Edge 團隊尋求更好的解決方案，廠商前綴正逐漸消失。放棄廠商前綴意味著使用它們進行優雅降級並非可行的方法，開發人員應確保他們對前綴的使用不會在非 WebKit 瀏覽器中產生意外結果。

由於 -webkit- 前綴在網絡上的 CSS 中佔據主導地位，一些網站在沒有它時無法正常工作。雖然這顯然是過去幾年開發人員做法不夠理想的標誌，但這導致 Mozilla 採取了一項相當不幸但幾乎必要的措施。到Firefox 46 或47（分別於2016 年4 月或5 月發布）為止，Mozilla 計劃實現對一系列非標準-webkit- 前綴的支持，以提高Firefox 與使用-webkit 前綴（通常是移動端）的網頁的兼容性。

這不是一個新想法，Microsoft Edge 也支持一系列 -webkit- 前綴以確保兼容性。 Opera 早在 2012 年就開始實現 -webkit- 前綴，此後已遷移到基於 WebKit 的 Blink 引擎。

W3C 和瀏覽器廠商並不打算在生產網站上使用廠商前綴：

“W3C 的官方政策聲明，你不應該在生產代碼中使用實驗性屬性，但人們確實這麼做，因為他們想讓網站看起來很酷，並保持在技術前沿。”——W3C 關於優化不同瀏覽器內容的頁面

但是，各地的開發人員都想盡快使用它們來訪問最新的功能。雖然前綴由於 WebKit 的主導地位而造成了一些混亂，但我認為它們成功地幫助網絡快速發展。 Mozilla 和 Microsoft 的方法可能對大多數網站無害。大多數在線網站可能已經包含了 -moz- 前綴，或者會發現 Mozilla 的更新無需任何操作即可提高其網站的兼容性。但是，作為專業的 Web 開發人員，我們需要做到徹底，並了解某些設計可能會出現異常結果。您可能已經知道您的哪些作品可能會因此更新而中斷。

開發人員，現在顯然是時候重新考慮您對前綴的使用方法並測試這些網站了。

涉及的前綴

Mozilla 可能需要包含一系列 -webkit- 前綴。據我了解，Mozilla 並不打算匹配 Edge 支持的 -webkit- 前綴列表，因為並非所有這些都可能需要確保 Mozilla 的 Gecko 佈局引擎與更廣泛的網絡兼容。

根據他們在關於兼容性/移動/非標準兼容性的 wiki 頁面上的說法，Mozilla 可能採用的前綴包括：

• -webkit-flexbox
• -webkit- 前綴的漸變
• -webkit-transforms
• -webkit-transitions
• -webkit-appearance
• -webkit-background-clip
• -webkit-device-pixel-ratio
• -webkit-animation
• -webkit-border*

其他一些功能也可能會受到影響，例如 @-webkit-keyframes。

跨瀏覽器測試至關重要

如果您是一位省略了-moz- 前綴以避免需要在Firefox 上測試較新CSS 功能的Web 開發人員——讓我們假設您當時時間緊迫，並且客戶強迫您這麼做——您將需要在Firefox 46 或47 中重新測試該網站。這些版本的 Firefox 將於 4 月或 5 月發布，因此您有一些時間來提前計劃。

為了在這些更改到達 Firefox 46/47 之前測試您的網站，您可以通過 about:config 中的 layout.css.prefixes.webkit 首選項訪問 Firefox Nightly 中更改的當前狀態。如果您安裝了最新的 Nightly 版本，則默認情況下應將其設置為 true。並非所有 -webkit- 前綴更改都已在 Firefox Nightly 中出現，但是這是測試您的網站目前外觀的地方。我建議等到大約 3 月份再使用 Firefox Nightly 進行更徹底的測試。

更緊急的是，Microsoft Edge 已經以這種方式解釋和顯示 -webkit- 前綴。這意味著您網站中包含的任何 WebKit 特定樣式都可能已在您沒想到的瀏覽器中顯示。如果您尚未這樣做，請在 Windows 10 中訪問 Microsoft Edge 並測試這些網站！

廠商前綴正在消失

幸運的是，隨著瀏覽器團隊尋找更好的解決方案，廠商前綴似乎正在消失。 Chrome/Blink 團隊調整了他們的方法：

“展望未來，我們將不再使用廠商前綴默認啟用功能，而是在about:flags 中將（無前綴）功能保留在“啟用實驗性Web 平台功能”標誌後面，直到該功能準備好默認啟用為止。”——Chrome/Blink 團隊

Firefox 團隊也正在朝著類似的方法前進：

“就其本身而言，Mozilla 內部目前的趨勢是[……] 通過在發布前關閉功能或如果功能足夠穩定則不帶前綴地發布功能來避免廠商前綴。至少作為一項通用策略；具體案例可能需要例外。”——來自Mozilla 的Boris

Microsoft Edge 旨在完全刪除對前綴的支持：

“Microsoft 也正在擺脫Edge 的廠商前綴。這意味著為了讓開發人員能夠利用特殊的HTML5 或CSS 功能，他們不必使用特定的Edge 前綴。相反，他們只需根據Web 標准進行編碼即可。 ”——Mashable

不再通過前綴進行優雅降級

這種遠離廠商前綴的舉動意味著一個方面——通過廠商前綴進行優雅降級顯然不可行。

使用廠商前綴來定位特定瀏覽器（例如，僅針對 Chrome 的特定內容）並非廠商前綴的本意；建議始終是開發人員使用所有可用的廠商前綴（從 -webkit- 到 -o-）。如果您正在使用依賴於帶前綴屬性的功能，並且您使用前綴在其他瀏覽器上優雅地降低了設計，那麼這將不再起作用。

結論

時代在變。 WebKit 的主導地位無意中導致了網絡分裂和不兼容，其他瀏覽器正試圖通過實現 -webkit- 前綴來提高其兼容性以跟上步伐。雖然隨著廠商前綴的逐步淘汰，這個問題應該會消失，但開發人員需要檢查他們對前綴的使用不會在非 WebKit 瀏覽器中產生意外結果。

有用鏈接

• Mozilla 關於這些更改的意圖文檔
• Mozilla 在 Bugzilla 中對此問題的錯誤跟踪
• Microsoft Edge 最新版本支持的 WebKit API
• 關於將 -webkit- 前綴引入網絡生活標準的文檔
• The Register 對 Firefox WebKit 兼容性更改的報導

關於 CSS 中廠商前綴的常見問題

什麼是 CSS 中的廠商前綴，為什麼要使用它們？

廠商前綴是瀏覽器製造商在新的 CSS 功能成為官方 CSS 規範的一部分之前添加它們的一種方法。它們用於確保這些新功能不會干擾其他瀏覽器中的現有功能。這允許開發人員試驗新功能並向 CSS 規範過程提供反饋。

在現代 Web 開發中廠商前綴仍然必要嗎？

廠商前綴的必要性一直是 Web 開發人員爭論的話題。雖然它們曾經對於確保跨瀏覽器兼容性至關重要，但現代 Web 已經看到不同瀏覽器之間 CSS 功能的顯著標準化。因此，對廠商前綴的需求大大減少，但在某些情況下仍然用於實驗性功能。

一些常見的廠商前綴是什麼？

一些常見的廠商前綴包括-webkit-（Chrome、Safari、較新的Opera 版本）、-moz-（Firefox）、-o-（舊的、預WebKit 的Opera 版本）和-ms-（Internet Explorer 和Microsoft Edge）。

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

要使用廠商前綴，只需在樣式表中的 CSS 屬性之前添加它即可。例如，要使用帶有 Firefox 廠商前綴的 border-radius 屬性，您可以編寫 -moz-border-radius: 10px;。

使用廠商前綴的缺點是什麼？

使用廠商前綴的主要缺點是它們會使您的 CSS 代碼更複雜，更難維護。每個瀏覽器都有自己的廠商前綴，因此您可能需要為單個 CSS 屬性編寫多行代碼。此外，廠商前綴可能會導致代碼驗證問題，因為它們不是官方 CSS 規範的一部分。

如何避免廠商前綴問題？

避免廠商前綴問題的一種方法是使用像 Sass 或 Less 這樣的 CSS 預處理器，它可以自動將廠商前綴添加到您的代碼中。另一種選擇是使用像 Autoprefixer 這樣的後處理器，它可以根據您想要支持的瀏覽器添加廠商前綴。

是否有使用廠商前綴的替代方法？

是的，有使用廠商前綴的替代方法。一種替代方法是使用像 Modernizr 這樣的功能檢測庫，它允許您測試特定的 CSS 功能並為不支持它們的瀏覽器提供後備方案。另一種替代方法是使用 CSS Grid 或 Flexbox，它們現在得到了廣泛支持，並且不需要廠商前綴。

CSS 中廠商前綴的未來是什麼？

CSS 中廠商前綴的未來是不確定的。雖然它們在某些情況下仍在使用，但趨勢是朝著標準化和使用功能檢測而不是廠商前綴的方向發展。但是，它們很可能在可預見的未來仍然是 CSS 環境的一部分。

廠商前綴如何影響網站性能？

廠商前綴可能會影響網站性能，因為它們會增加 CSS 代碼的大小。但是，影響通常很小，特別是如果您使用 CSS 壓縮器來壓縮代碼。

如何及時了解有關廠商前綴的最新發展？

鑑於 Web 開發的快速變化性質，及時了解有關廠商前綴的最新發展可能具有挑戰性。但是，關注 CSS 相關的博客、論壇和社交媒體帳戶會有所幫助。此外，CSS 工作組的網站和 Mozilla 開發者網絡是了解最新信息的極好資源。

以上是是時候重新考慮CSS中的供應商前綴的時間的詳細內容。更多資訊請關注PHP中文網其他相關文章！