3

私が取っているコースでは、次のことがわかりました（抜粋）：

p.box{
-webkit-transition: border-radius 1s;
-moz-transition: border-radius 1s;
-o-transition: border-radius 1s;
-ms-transition: border-radius 1s;
transition: border-radius 1s;
}

p.rounded{
border-radius:50px;
}

ただし、この表によると、 以外のブラウザ固有の接頭辞を使用しても意味がないようです-webkit-。IE、FireFox、および Opera の新しいバージョンは常にこのプロパティをサポートしていますが、古いバージョンはサポートしていません。-moz-したがって、 ,-o-で始まる行は-ms-、ページの表示にまったく影響を与えないように思えます。の場合、今後は常にこれらを省略できますtransitionか? それとも私は何かを誤解していますか？それともテーブルが間違っていますか？

4

1 に答える 1

2

v15 までの Firefox にはプレフィックスが必要で、v12まで-mozの Opera にはプレフィックスが必要-oです (-msこの場合、プレフィックスは無意味です) *。したがって、これらのプレフィックスを削除しても、すべてのブラウザーの最新バージョンで違いが見られないというのは正しいことです。ただし、これらのわずかに古いバージョンでも、特定のサイトへのかなりの数の訪問者を構成していることに気付く場合があります。

プレフィックスを必要とするブラウザーのバージョンが完全に過去のものになるまで、プレフィックスを含めることをお勧めします。そうすれば、彼らがあなたの訪問者のごく少数を占めるだけであることがわかります. 例として、プレフィックスを含める価値はなくなりましたborder-radius: Firefox はプレフィックスなしのバージョンを v3.6 までサポートし、Chrome は v4 からサポートしています。

CompassやPrefix free (いずれかがワークフローに適合する場合)などを使用して、これを処理できます。

編集- 私は個人的にプレフィックスフリーを利用していません.OPが厳密に必要ではないJavaScriptでスタイリングを作成することを躊躇しているためです. SASS/Compass を使用できない場合は、Sublime Textの Prefixr プラグインをお勧めします。そうすれば、接頭辞なしのバージョンを手動で書くことだけを気にする必要がありますが、スタイルシートで完全に接頭辞を付けたバージョンを送信することはできます。

* これらの統計はCanIUse...から取得されます。すべてのブラウザーに関する情報を表示するには、互換性テーブルの左上にある [すべてのバージョンを表示] というリンクをクリックするだけです。

于 2013-03-25T14:34:50.767 に答える