爲webkit瀏覽器使用border-radius會好嗎？

Question

在Safari & Webkit中，僅使用border-radius似乎可以在不向其添加前綴-webkit的情況下工作。爲邊界半徑保留-webkit-前綴是否可以？

Answer 1

你錯過了驗證點。您驗證以避免錯誤！這些包括：不安全的瀏覽器擴展，黑客，即黑客和實際錯誤。絕對不應該讓你的代碼更少跨瀏覽器功能。

你應該知道有這樣的事情，如預期的錯誤，甚至有效的代碼適用於那些。瀏覽器擴展名如-moz-，-webkit-和-o-是預期的錯誤。所有瀏覽器都設計爲放棄未知規則。這就是CSS允許向後兼容的方式。支持CSS2的瀏覽器將放棄CSS3 border-radius規則。有效或無效與它沒有任何關係，並且任何瀏覽器都不會因此而中斷（幸運的是，對於我們來說，將CSS轉換爲XML的想法被壓扁並且從未看到過白天）。 Opera將放棄-moz-規則，Firefox將放棄-o-規則，這不是錯誤。這是預期的行爲：

保證初始短劃線或下劃線不會在任何當前或未來級別的CSS中用於屬性或關鍵字。因此，典型的CSS實現可能無法識別這些屬性，並可能根據處理解析錯誤的規則忽略它們。但是，由於最初的短劃線或下劃線是語法的一部分，CSS 2.1實現者應始終能夠使用符合CSS的解析器，無論它們是否支持特定於供應商的擴展。

w3c甚至定義了how to write these "Vendor-specific extensions"。以下是目前擴展衆所周知的：

• -ms-，mso- 微軟
• -moz- Mozilla的
• -O-，-xv- Opera軟件
• -webkit- 蘋果
• -khtml- KDE

也有一些你可能從來沒有聽說過的：

• -atsc- 高級電視標準委員會
• -wap- WAP論壇

瀏覽器實施草稿階段或部分實現（即。瀏覽器支持CSS規則的X，Y而不是Z）作爲擴展。通過這種方式，他們可以防止規範中的任何更改打破以前版本的瀏覽器。有些瀏覽器已經開始使用槍支並且將它們實現爲非擴展，並且通常的結果一直被稱爲瀏覽器已經在自己的腳下開槍了，例如：「瀏覽器XXX版本YYY執行不當[... ]」。最值得注意的是IE在這方面排名第一，但其他瀏覽器也有successfully managed to shoot themselves in the foot。當草稿成爲標準並且瀏覽器完全（或充分）實現規範時，會創建一個不帶-xxx-前綴的規則。

近年來，所有主流瀏覽器都將此作爲事實標準。

---

如何以及何時使用-xxx-瀏覽器擴展？像往常一樣，最好的做法是在您使用的最先進的瀏覽器中只使用符合標準的代碼，然後添加所有安全擴展。在擴展名之外使用基於w3c標準或當前工作草案的擴展名。不要使用丟棄的標準/草案或瀏覽器的崇拜標準（即一些舊的Firefox標準）。除非它有穩定的後備，否則也要避免任何修補規則。

在the border-radius rule的情況下，您有穩定的回退。

如何保持窗體和功能？在我看來，大多數人不會爲「ohmygosh無效」困擾，而是他們被迫爲同一行寫出多個規則。一個簡單的解決方案是使用模板系統。 CSS中有很多，因爲保持代碼乾的問題是一個持久的問題。

有manymanymany不同的實現在那裏。儘管基本的想法是使用mixin（即，功能）：

=border-radius(!radius) 
    -moz-border-radius= !radius; 
    -webkit-border-radius= !radius; 
    -khtml-border-radius= !radius; 
    border-radius= !radius; 

我們現在隨處寫：

.stuff 
    +border-radius(15px); 

此代碼更加靈活然後就寫border-radius: 15px和最好的希望。它也是可維護的（沒有任何元素的邊界半徑應該超過10px？沒問題）。

Answer 2

這樣做可能會遇到css驗證錯誤。 -前綴屬性被視爲可選的擴展，因此導致問題的可能性較小。

我建議你保持-webkit只是incase，一些瀏覽器（IE）在HTML/CSS不驗證時不會很好玩。這就是所謂的怪癖模式。

Answer 3

border-radius支持safari 5及更高版本。 -webkit-border-radius支持safari 3和更高版本。 所以，如果你想支持safari 3+，你必須使用-webkit-border-radius