爲什麼mozilla和webkit將-moz-和-webkit添加到CSS3規則中？

CSS3規則帶來很多有趣的功能。例如，可以使用border-radius。該標準說如果你寫這條規則：爲什麼mozilla和webkit將-moz-和-webkit添加到CSS3規則中？

div.rounded-corners { 
    border-radius: 5px; 
}

我應該得到一個5px的邊界半徑。

但是mozilla和webkit都沒有實現這個功能。但是，它們使用不同的名稱（分別爲-moz-border-radius和-webkit-border-radius）以相同的參數執行相同的操作。

爲了滿足儘可能多的瀏覽器有可能，你結束了這一點：

div.rounded-corners { 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
}

我可以看到兩個明顯的缺點：

複製粘貼代碼。這有明顯的風險，我不會在這裏討論。
W3C CSS validator不會驗證這些規則。

與此同時，我沒有看到任何明顯的優勢。

我相信mozilla和webkit背後的人比我更聰明。以這種方式構建事物必定有一些很好的理由。只是我看不到他們。

所以，我必須問你們：爲什麼這樣？

來源

2010-05-28 kikito

-moz-border-radius描述了Mozilla的語義。如果CSS3以不同的語義發佈，那麼Mozilla可以始終使用這些語義實現border-radius，並且它們不會破壞任何人的網站。同時，如果他們直接使用border-radius，那麼如果CSS3以不同的語義發佈，Mozilla必須選擇打破人們的網站，或永遠支持非標準的CSS。

來源

2010-05-28 17:07:01 geocar

嗯。我不確定我是否按照這裏的推理。我們假設邊界半徑標準改變了。並且Firefox用擴展名創建它。那不會破壞既有邊界半徑又有-moz-border-radius的網站嗎？或者他們會使舊的實現「覆蓋」標準的-moz-border-radius？ – kikito 2010-05-28 17:14:56

通常，「舊」前綴版本將作爲別名保留一段時間。例如。如果你設置了'-moz-opacity'，它會設置'opacity'風格，反之亦然。語法不同的地方會在格式之間進行轉換。「-moz-border-radius」的語法與'-webkit-border-radius'的語法目前有很大不同，因爲它們分別實現了該功能;只有簡單的情況在兩者上都是相同的。如果他們沒有使用前綴的屬性名稱，這會導致不兼容問題。 – bobince 2010-05-28 17:24:54

瞭解。謝謝！ – kikito 2010-05-28 23:07:06

他們這樣做是因爲它沒有完全支持。這很像是在測試版中使用該代碼。最終他們將增加對邊界半徑的支持。

當您看到線性漸變時，這一點更爲明顯。

background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7); 
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

注意它們不使用相同的語法。當他們最終達成一個標準，然後添加對線性梯度的支持並使用正確的語法。

來源

2010-05-28 17:04:42 corymathews

簡單。專有變量-moz和-webkit在之前之後border-radius被寫入CSS3推薦。他們有自己的實現，但不知道這些是否符合W3C的最終建議。因此，他們當時也沒有使用現在正式的名字，以免後來破壞事情。

來源

2010-05-28 17:07:40

請注意as of 2010-09-14，-moz前綴已從border-radius中刪除。這意味着Firefox 4將支持無前綴的邊界半徑。

來源

2010-09-15 21:33:48 michaelhanson

感謝分享！ – kikito 2010-09-16 05:37:25

爲什麼mozilla和webkit將-moz-和-webkit添加到CSS3規則中？

回答

相關問題