CSS轉換和轉換哪些前綴（例如-o-）是必要的？

-2

是否有任何最新文檔列出轉換和轉換以及哪些瀏覽器版本需要使用以下前綴之一？或者有人能爲我總結嗎？CSS轉換和轉換哪些前綴（例如-o-）是必要的？

我是否需要將所有這些用於轉換？

-webkit-transform: 
    -moz-transform: 
    -ms-transform: 
    -o-transform: 
    transform:

而所有這些過渡？

-webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    -ms-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
    transition: all 0.4s ease;

爲了安全起見？

來源

2016-09-15 Cream Whipped Airplane

請搜索了一下後之前的任何問題... http://caniuse.com/ – DaniP

我看着caniuse。沒有找到真正的解釋。它只是說有多少％的瀏覽器支持它的前綴。還是我瞎了？ –

問題要求我們建議，查找或推薦書籍，工具，軟件庫，插件，教程，解釋技術或提供任何其他異地資源，都是無法用於堆棧溢出堆棧溢出 –

保持最新的前綴是一個永無止境的努力，人們可能想承諾或像我一樣爲了更好/更簡單的解決方案而放棄。

就我個人而言，我來自把核心代碼質量放在功能上的核心純粹主義者。因此，我不加任何前綴。

我知道，這是不可接受的情況下，事情需要儘可能多的機器上工作 - 例如，當您在客戶端項目上工作 - 並開始使用CSS預處理器，自動爲您的前綴支持指定機器集合的CSS代碼（例如「所有主要瀏覽器的最後5個版本」或「90％的市場份額」）。這樣，你的代碼保持乾淨，你仍然有一個整齊的前綴生產文件。預處理器也可以做很多其他便利的事情;嵌套CSS和變量只是其中的兩個。

也給你的問題一個真正的答案：Can I use...是一個很好的服務，以查看給定的CSS屬性的瀏覽器支持。它還會告訴你哪個瀏覽器仍然需要屬性的前綴。

來源

2016-09-15 15:09:35

謝謝。但是，讓我們說，我把'translateX'放在一邊，它只是指向2D動畫。並說，舊版android瀏覽器需要-webkit- si。那麼這是否意味着我只能在這種情況下執行-webkit-transofrm並進行轉換？ –

我會得出這個結論，是的。按「顯示全部」也會給你一個過時的瀏覽器列表，你會發現它們中的很多需要前綴。在決定使用哪些前綴之前，您還應該檢查它們。 –

我真的很瞎。我從來沒有注意到所有的按鈕。這正是我需要的。 FML。謝謝 –

可能不是。您可能需要爲此進行自己的瀏覽器測試。 Can I use可能是支持的transforms和transitions上的最新信息。爲了安全起見，我將全部使用它們。如果你使用SASS或LESS，你可以創建一個mixin讓你的生活更輕鬆。

LESS

.transition (@transition) { 
    -webkit-transition: @transition; 
    -moz-transition: @transition; 
    -ms-transition:  @transition; 
    -o-transition:  @transition; 
    transition:   @transition; 
} 
.transform(@transform){ 
    -webkit-transform: @transform; 
    -moz-transform:  @transform; 
    -ms-transform:  @transform; 
    -o-transform:  @transform; 
    transform:   @transform; 
}

SASS

@mixin transition($transition...) { 
    -moz-transition: $transition; 
    -o-transition:  $transition; 
    -webkit-transition: $transition; 
    transition:   $transition; 
} 

@mixin transform($transform) { 
    -moz-transform: $transform; 
    -o-transform:  $transform; 
    -ms-transform:  $transform; 
    -webkit-transform: $transform; 
    transform:   $transform; 
}

來源

2016-09-15 15:11:10

CSS轉換和轉換哪些前綴（例如-o-）是必要的？

回答

相關問題