web-dev-qa-db-ja.com

CSS 3-遷移接頭辞-どの接頭辞を使用しますか？

移行のためのCSSベンダープレフィックスについて質問があります。

このソース は、「これをすべてのブラウザで機能させるためには、通常のすべてのプレフィックスを使用する必要があります（-o-、-webkit-、-moz-、-ms-）」。

そのページ は-webkit-と-moz-の接頭辞のみを示し、IE 10+、FF 16+ and Opera 12.1+は、プレフィックスなしのバージョンを読み取ることができます。

Twitter Bootstrapのコードでは、接頭辞のないバージョンに加えて、常に-webkit-、-moz-および-o-の接頭辞バージョンが存在します。

どのプレフィックスを使用する必要がありますか？

csscss-transitionstransitions
17
Sven

http://caniuse.com/#search=transition は、最新のブラウザには-webkit-とプレーンプロパティが必要であることを示しています。

-webkit-transition: all .5s ease;
transition: all .5s ease;

しかし、それらをすべて追加しても問題はありません。プレフィックスのないプロパティが最後のプロパティであることを確認してください。

編集：下のコメントで述べたように、「すべてのバージョン」をクリックすると、各ブラウザがいつプレフィックスをドロップしたかを確認できます。現時点では、-moz-および-o-も使用することをお勧めします。

2015年5月を編集：ビルドプロセスのステップ（Gulp/Gruntタスクなど）またはプラグインとして Autoprefixer を使用することを強くお勧めしますあなたのコードエディタに。 caniuse.comブラウザーサポート統計に自動プレフィックスを提供します。

2019を編集：プレフィックスは不要になり、オートプレフィックスはますます少なくなります。将来は素晴らしいです:)

30
antejan

編集：プレフィックスはもう必要ありません。

transitionを使用してください。

現在、CSS3の移行にはすべてのベンダープレフィックスを使用する必要があります。例えば、

-webkit-transition: all 500ms;
   -moz-transition: all 500ms;
     -o-transition: all 500ms;
        transition: all 500ms;
16
Mooseman

使用するCSSプロパティによって異なります。 Mozillaは、多くのプロパティの接頭辞を取り除くのに優れています。しかし、あなたは言うことができませんallプロパティはプレフィックスフリーになりました。 Chromeグラデーションをプレフィックスなしにしたいというチームからのニュースを聞きます。Operaについては知りませんが、Internet Explorer 10では-ms多くのCSS3プロパティの接頭辞。

今日は、プレフィックスを追加するだけです。しかし、未来はこのようにはなりません！

1
Mohsen

自分でお願いして、ダウンロード Prefix Free をダウンロードしてください。これは、プレフィックスなしでほとんどすべてのプレフィックスが必要なプロパティを使用できる非常に小さなJavaScriptです（トランジション、アニメーション、メディアクエリを含む）。

編集：これらすべての唯一の例外は、Operaのメディアクエリです。この場合、ピクセル比（およびその他）は、小数ではなく分数として表現する必要があります。

0
Jules

もちろん、接頭辞なしのバージョンとともに-webkit-のみ。

他のすべてのブラウザは、プレフィックスのないプロパティ（FirefoxやOperaなど）を使用して移動したか、それらを使用しなかった（IEなど）

CanIUse.comを定期的にチェックして、最新の情報を確認することをお勧めします。

http://caniuse.com/#feat=css-transitions

0
Evgeny

ここでは細かい点に逆らって、別のアプローチを提案します。分析を使用して設定されたWebサイトがある場合は、ブラウザーの統計とバージョンを確認し、ユーザーが実際に使用しているものを確認します。

もちろん、プレフィックスの大部分を削除できますが、ユーザーが古いブラウザを使用している場合は（何らかの理由で）、機能を利用できません。

任意のWebサイトがyoプレフィックスyoに必要な正確なプレフィックスを伝えることはできません。自分のデータからその情報を理解できるのはあなただけです。

データがない場合は、すべての接頭辞を追加して、できるだけ多くの人をサポートしてください。次に、数か月後にデータを確認し、必要に応じてリファクタリングします。

0
Christian