-webkit-、-moz、-ms-、-o-などの使用方法を知りたいのですが？

Question

プレフィックス-webkit-、-moz-、-ms-、-o-をCSSプロパティで使用する方法を知りたいのですが？私はいくつかの属性で多くの "矛盾"を見ていますが、プログラマーだけが-moz-を入れているプロパティでは、彼はすべてを置いています。その理由はありますか？

Answer 1

どのプレフィックスを使用するかは、どのブラウザに基づいているのかを知るにはがサポートします。接頭辞が必要なブラウザのバージョンを確認するには、caniuse.comが良い場所です。

このバリエーションは、他の開発者がサポートすることを決めたブラウザに起因します。より多くの接頭辞が表示された場合、サイトの開発者（サイト所有者）は、より古い/より深いレベルの古いブラウザーのサポートを決定しました。接頭辞の数を減らすとブラウザの数が少なくなります。なぜですか？ターゲットオーディエンスと機能要件（Web API）のいくつかの理由が考えられます。

マニュアルルートに行くことができますが、多くの開発者はAutoprefixerやSASSやLESSなどのCSSプリプロセッサなどのツールを使用します。これらのツールは、使用する接頭辞を定義するさまざまな方法を提供します。

AutoPrefixerのように、サポートしたいブラウザを列挙するオプションがあり、プレフィックスのないバージョンに基づいてこれらのブラウザをサポートするために必要なプレフィックスなどがわかります。あなたが定義した接頭辞が追加されますミックスイン（基本的には関数）を作成することができますSASSまたはLESSのようなCSSプリプロセッサで

。

Answer 2

ベンダープレフィックスを置かないでください（ユーザにはブラウザを更新させ、公式/非未確定のCSSルールは避けてください）。

「プレフィックス」が「必須」（または「気になる」価値がある）かどうかをまだ知りたい場合は、http://shouldiprefix.com/を参照してください。

最後に、CSSプリプロセッサでこれを処理できますが、開発やリリースのスタックに追加するのは無駄です（ただし、ベンダーの接頭辞を使用している場合や、古いブラウザ企業のイントラネット）。

Answer 3

それはあなたがそれらのすべてを追加する必要がある各ブラウザ上で動作することを確認したい場合は、いくつかのウェブサイトは、あなたが:)

Answer 4

素晴らしい質問をサポートしないことを決定し、ブラウザを気にする必要はありませんので、古いブラウザをサポートしてはいけません。

多くのプログラマは、特定のCSSプロパティがサポートしているすべてのブラウザでサポートされているかどうかを判断するためにCanIUseを使用しています。サポートしたいすべてのブラウザで完全にサポートされていない場合、プログラマーはベンダープレフィックス（-webkit-など）を使用する必要があります。

シナリオ例

プログラマはtransformプロパティ（CanIUse#Transform）を使用していたと言います。 Android Browser 4.4 & 4.4.4が右上に黄色の警告を表示する方法を参照してください。その上にカーソルを合わせると、「ウェブキットでサポートされています」と表示されます。これは正確です。 -webkit- vendorプレフィックスを追加するときに使用します。

私はあなたがそれらをすべて追加しなければならないと反対です（ただし、実際に何かを傷つけることはありません）。新しいCSSプロパティを使用する前にちょっとしたリサーチを行うだけで、あなたの心が望むすべてのブラウザをサポートしながら、より洗練されたCSS/SASS/LESS /などが得られます。 ：P

私はこれを自動的に行うには素晴らしいツールがあると思います。 Xenosはいくつか言及した。

あなたのCSSの取り組みに最適です。 -moz- = Mozilla Firefoxの -ms-に使用= Google ChromeのとAppleのSafariブラウザを使用オペラ -webkit-のために使用されるMicrosoft Internet Explorerの -o- = =に使用：

Answer 5

これらの異なる特性は、 "ベンダープレフィックス" と呼ばれています。

開発しているウェブページのブラウザ互換性に対処するために、適用するCSSにすべてのベンダープレフィックスを使用することは、常に良いアプローチです。

しかし、LESSのようなcssプリプロセッサは、このような事態に対処することができます。私は個人的にLESSを使って、このベンダープレフィックスのすべてを扱い、それは本当に簡単です。私がプリプロセッサを使用していなかったなら、私は依然としてデフォルトのプロパティ名と共にベンダープレフィックスcssを書くことを考えていました。

互換性の問題については、あとで修正して後で修正するよりも、事前に十分に対処しておくことは、常に良いことです。それはちょうど、自動的に物事のこれらのタイプを追加するポストプロセッサ（すなわち[PostCSS]（http://postcss.org/））を使用することがおそらく良いでしょう https://github.com/less/less-plugin-autoprefix