プレフィックス（例：-o-）が必要なCSS変換とトランジションは必要ですか？

Question

次のプレフィックスのうち、変換およびトランジションに必要なものと、ブラウザのバージョンを記載した最新のドキュメントはありますか？それとも誰かが私のためにそれを集めることができますか？

これらはすべて変換に使用する必要がありますか？

-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; 

ちょうど安全ですか？

Answer 1

プレフィックスの最新の状態は、より良い/より簡単な解決策のために、コミットしたい、あるいは私のように放棄したいかもしれない絶え間ない努力です。

個人的には、私はハードコアの純粋主義者であり、機能性を超えてコードの品質を高めています。したがって私は何も接頭辞を付けません。

これは、クライアントプロジェクトで作業しているときなど、できるだけ多くのマシンで作業する必要がある多くのケースでは受け入れられないことですが、CSSプリプロセッサを使用して自動的に指定された一連のマシンをサポートするCSSコード（たとえば、「すべての主要ブラウザの最新バージョン」、「90％の市場シェア」）このようにして、コードはきれいになりますが、まだプレフィックスのついた制作ファイルがあります。プリプロセッサは他の多くの便利なことも行うことができます。 CSSと変数を入れ子にすることは、それらの2つだけです。

また、あなたの質問に実際の答えを与えるには：Can I use...は、特定のCSSプロパティでブラウザサポートを見るのに良いサービスです。また、プロパティのプレフィックスが必要なブラウザが表示されます。

Answer 2

おそらくそうではありません。このためには、独自のブラウザテストを行う必要があります。 Can I useはおそらくサポートされているtransformsとtransitionsの最新情報です。安全であるように、私はそれらをすべて使用します。 SASSまたはLESSを使用している場合は、ミックスインを作成してより簡単に使用できます。

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; 
}