彼らは何ですか？なぜあなたはそれらを使うべきですか？
CSSベンダープレフィックスは、 CSSブラウザプレフィックスとも呼ばれ、ブラウザメーカーが新しいCSS機能のサポートをすべてのブラウザで完全にサポートされる前に追加する方法です。 これは、ブラウザメーカーがこれらの新しいCSS機能をどのように実装するかを正確に判断しているテストや実験期間中に行われます。 これらのプレフィックスは、数年前のCSS3の登場で非常に人気がありました。
CCS3が最初に導入されたとき、興奮した多くの特性が、異なる時間に異なるブラウザーにヒットし始めました。 たとえば、Webkit搭載のブラウザ（SafariとChrome）は、変換やトランジションのようなアニメーションスタイルのプロパティを導入した最初のものでした。 ベンダーのプレフィックス付きのプロパティを使用することで、Webデザイナーはその新しい機能を自分の仕事に使うことができ、他のすべてのブラウザメーカーが追いつくのを待たずに、すぐにサポートしていたブラウザで見ることができました。
したがって、フロントエンドのWeb開発者の観点からは、新しいプレフィックスを使用して新しいCSS機能をサイトに追加しながら、ブラウザがこれらのスタイルをサポートすることがわかっています。 これは、異なるブラウザのメーカーがわずかに異なる方法で、または異なる構文でプロパティを実装する場合に特に役立ちます。
使用できるCSSブラウザプレフィックス（それぞれ異なるブラウザに固有のもの）は次のとおりです。
- Android：-webkit-
- Chrome：-webkit-
- Firefox：-moz-
- Internet Explorer：-ms-
- iOS：-webkit-
- オペラ：-o-
- Safari：-webkit-
ほとんどの場合、新しいCSSスタイルプロパティを使用するには、標準のCSSプロパティを使用し、各ブラウザのプレフィックスを追加します。 通常のCSSプロパティが最後に来る間に、プレフィックス付きのバージョンが常に最初に表示されます（好きな順序で）。 たとえば、ドキュメントにCSS3トランジションを追加する場合は、次のようにトランジションプロパティを使用します。
-webkit- transition：すべての4秒が簡単。
-moz-移行：すべての4sの容易さ;
-ms- transition：すべての4 秒間の容易さ。
-o-遷移：すべての4sの容易さ;
移行：すべての4秒の容易さ;
注意：一部のブラウザでは、特定のプロパティの構文が他のものとは異なるため、ブラウザのプレフィックス付きのバージョンのプロパティは標準のプロパティとまったく同じであると想定しないでください。 たとえば、 CSSグラデーションを作成するには、線形グラデーションプロパティを使用します。 Firefox、Opera、現代版のChromeとSafariでは適切なプレフィックスを使用していましたが、ChromeとSafariの初期バージョンでは接頭辞のプロパティ-webkit-gradientが使用されていました。 また、Firefoxは標準の値とは異なる値を使用します。
宣言をCSSプロパティの通常の接頭辞なしのバージョンで常に終了させる理由は、ブラウザがルールをサポートしているときにそのルールを使用するためです。 CSSの読み方を覚えておいてください。 後のルールは、特定のものが同じであれば前のルールよりも優先されるので、ブラウザはベンダーバージョンのルールを読み、通常のルールをサポートしていない場合はそれを使用します。実際のCSSルール
ベンダーの接頭語はハックではありません
ベンダープレフィックスが初めて導入されたとき、多くのWeb専門家は、ハッキングか、ウェブサイトのコードをフォークしてさまざまなブラウザーをサポートする暗い頃に戻ったのか疑問に思いました（「 このサイトはIEで最もよく見られます」というメッセージを覚えておいてください）。 しかし、CSSベンダーのプレフィックスはハックではありません。あなたの仕事でそれらを使用することについての予約はありません。
CSSのハックは、別のプロパティを正しく動作させるために、別の要素またはプロパティの実装における欠陥を悪用します。 たとえば、ボックスモデルのハックは、 ボイスファミリプロパティの解析や、ブラウザがバックスラッシュ（\）を解析する際の欠陥を悪用しました。 しかし、これらのハックは、Internet Explorer 5.5がボックスモデルを処理する方法とNetscapeがそれをどのように解釈したかの違いの問題を解決するために使用され、音声ファミリースタイルとは関係ありません。 ありがたいことに、これら2つの時代遅れのブラウザは、私たちが最近懸念しているものではありません。
ベンダープレフィックスはハックではありません。これは、仕様がプロパティの実装方法に関するルールを設定すると同時に、ブラウザメーカが他のすべてを壊すことなくプロパティを別の方法で実装できるようにするためです。 さらに、これらのプレフィックスは、 最終的に仕様の一部となる CSSプロパティで動作しています 。 プロパティに早期にアクセスできるように、コードを追加するだけです。 これは、通常の接頭辞以外のプロパティでCSSルールを終了させる別の理由です。 そうすれば、完全なブラウザサポートが達成されたら、プレフィックス版を削除することができます。
ブラウザが特定の機能をサポートしているかどうかを知りたいですか？ ウェブサイトCanIUse.comは、この情報を収集し、現在どのブラウザとそのブラウザのどのバージョンが現在機能をサポートしているかを知らせる素晴らしいリソースです。
ベンダープレフィックスは厄介ですが一時的です
はい、それはすべてのブラウザで動作するようにプロパティを2〜5回書く必要があると迷惑で反復的に感じるかもしれませんが、それは一時的な状況です。 たとえば、ちょうど数年前、書かなければならなかった箱に丸い角を設定する：
-moz-border-radius：10px 5px;
-webkit-border-top-left-radius：10px;
-webkit-border-top-right-radius：5px;
-webkit-border-bottom-right-radius：10px;
-webkit-border-bottom-left-radius：5px;
border-radius：10px 5px;
しかし、ブラウザがこの機能を完全にサポートするようになったら、実際には標準化されたバージョンだけが必要です。
border-radius：10px 5px;
Chromeはバージョン5.0からCSS3のプロパティをサポートし、Firefoxはバージョン4.0で、Safariは5.0で、Operaは10.5で、iOSは4.0から、Androidは2.1から追加しました。 Internet Explorer 9でもプレフィックスなしでサポートされています（IE 8以降ではプレフィックスの有無にかかわらずサポートしていません）。
ブラウザが常に変化していくことを忘れないでください。最新の方法より数年遅れているWebページを作成する場合を除き、古いブラウザをサポートするための創造的なアプローチが必要です。 結局、ブラウザのプレフィックスを書くことは、将来のバージョンで修正される可能性が最も高いエラーを見つけて悪用するよりもずっと簡単であり、悪用するために別のエラーを見つける必要があります。