CSS 3 中 -webkit-, -moz-, -o-, -ms- 這些私有前綴什麼時候可以移除？

01-14

現在寫一段 CSS 3 代碼需要同時寫上不同的瀏覽器私有前綴，例如：

-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
-o-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
box-shadow: 0 2px 3px rgba(0, 0, 0, .1);

我該如何知道到什麼時候或者什麼版本的時候這些瀏覽器已經可以支持無前綴的標準了，從而只需要寫如下代碼就可以了？

box-shadow: 0 2px 3px rgba(0, 0, 0, .1);

由於瀏覽器廠商眾多，不同的廠商有著自己的利益，所以很多時候對於同一規範並不會完全按照執行。特別是早期。對於CSS部分屬性的前綴，不同的瀏覽器添加不同的前綴到今天來說已經是成為歷史了。使用PostCSS的Autoprefixer插件可以解決這些問題，你也不需要擔心CSS屬性應該添加什麼樣的前綴。你只需要控制你自己需要兼容什麼樣的瀏覽器版本，那麼這個插件就可以幫你解決後顧之憂。所以到今天，前綴已不是什麼問題了？

當你學會用一種東西叫 autoprefixer 的時候

難道你還手寫前綴的？這代碼維護起來多難看啊

我認為早就不應該在源代碼中寫私有有屬性前綴了。正確的姿勢是在項目構建階段，用autoprefixer這個工具來為編譯後的css自動補全所需的前綴。無論你是用webpack、gulp、grunt還是fis，它都能完美配合。

這個工具中內置了非常詳盡的數據，描述每個私有有屬性在瀏覽器下的各版本下，是否需要前綴。配置該工具的時候，只要指明需要兼容的瀏覽器版本，它就會很智能的按需添加前綴了。如果私有語法與標準有差異，它也能自動處理。

只有一種情況下例外，還是要寫前綴，那就是你寫的這條css屬性沒有對應的w3c標準語法。

現在最新版的瀏覽器基本都支持css3 基本都不用寫前綴，寫前綴是為了向前兼容老版本的瀏覽器而已

就像之前樓的答主們說的

據我所知應該是歷史原因

CSS標準發布相對來說一直是滯後的

瀏覽器廠商會先進行新特性嘗試

這就造成了實際與事實可能會有不一致的地方

所以

帶前綴的是瀏覽器私有實現

不帶前綴的是標準

加前綴是為了兼容

應該是處理不同瀏覽器之間的兼容問題吧

-moz-對應 Firefox,

-webkit-對應 Safari and Chrome

-o- for Opera

-ms- for Internet Explorer

答非所問了吧。。。

可以到以下網站查詢CSS3特性，在瀏覽器的哪個版本開始可以不用加前綴的

Can I use... Support tables for HTML5, CSS3, etc

比如 CSS3 2D Transforms 這個特性，chrome是從v36開始不用寫前綴了，上面都有明確標識，現在看來，大部分css3都不需要寫前綴了，畢竟用老版本chrome瀏覽器的用戶非常少了

PC端的話，估計統一不了了，各瀏覽器廠商都有各自的私有屬性，所以，PC端開發的話，你應該學會使用這個模塊：`autoprefixer`

移動端的話，目前大部分設備的瀏覽器都是基於webkit實現的，雖然其它廠商的也有，但不是主流，那就讓它隨風逝去吧！所以，移動端可以幾乎不用加這些私有前綴，個別由於版本迭代，需要加-webkit-前綴兼容低版本的瀏覽器就行了。

npm autoprefixer

等待谷歌統一全球的時候吧。

不過基本可以無視前綴啊，因為有PostCss

期待以後各廠家別搞奇葩的東西，瀏覽器兼容這個真的心塞

這麼古老的問題為什麼會刷給在下。。。

來更新下現狀吧，目前來看這些前綴還是無法無安全去除，但是在前端的日常開發中已經不需要寫出來了。

如果你還在寫原生CSS，一定要考慮選用一門CSS預處理語言。Sass 與 Less 是目前兩門最常用的預處理語言。除了免除寫兼容性前綴外，預處理還支持繼承，調用，與條件切換等CSS不具備的功能。具體功能上兩門語言各有千秋，個人認為Sass略有優勢，但其實實在相差不多。

常用的IDE都應該已經預集成這兩門語言的插件，還在寫原生CSS的話一定要加以考慮。

兼容性的主要矛盾是瀏覽器日新月異的版本與緩慢滯後的規則之間的矛盾問題，

不過反過來的話，嗯。。。版本不支持

看需要兼容到哪，低版本只支持後綴的寫法，當你需要兼容的時候肯定得寫，不過現在都是用gulp之類的自動化工具自動添加，不在自己親手寫了。

-moz代表firefox瀏覽器私有屬性

-ms代表IE瀏覽器私有屬性

-webkit代表chrome、safari私有屬性

複製粘貼一下，不會多麻煩

目前來講看你想兼容的瀏覽器了

當然有的是可以被兼容識別的，做網頁你也應該知道。

在一個看你網站的訪問對象，首先要加強這些主要訪問者的兼容性。