CSSベンダープレフィックスは、CSSブラウザプレフィックスとも呼ばれ、ブラウザメーカーが新しいCSS機能のサポートをすべてのブラウザで完全にサポートされる前に追加する方法です。これは、ブラウザメーカーがこれらの新しいCSS機能をどのように実装するかを正確に判断しているテストや実験期間中に行われます。これらのプレフィックスは、数年前のCSS3の登場で非常に人気がありました。
CCS3が最初に導入されたとき、興奮した多くの特性が、異なる時間に異なるブラウザーにヒットし始めました。たとえば、Webkit対応のブラウザ（SafariやChrome）は、変換やトランジションのようなアニメーションスタイルのプロパティを導入した最初のものでした。ベンダーのプレフィックス付きのプロパティを使用することで、Webデザイナーはその新しい機能を自分の仕事に使うことができ、他のすべてのブラウザメーカーが追いつくのを待たずに、すぐにサポートしていたブラウザで見ることができました。
したがって、フロントエンドのWeb開発者の観点からは、新しいプレフィックスを使用して新しいCSS機能をサイトに追加しながら、ブラウザがこれらのスタイルをサポートすることがわかっています。これは、異なるブラウザのメーカーがわずかに異なる方法で、または異なる構文でプロパティを実装する場合に特に役立ちます。
使用できるCSSブラウザプレフィックス（それぞれ異なるブラウザに固有のもの）は次のとおりです。
- アンドロイド：
-webkit-
- クロム：
-webkit-
- Firefox：
-moz-
- インターネットエクスプローラ：
-ミズ-
- iOS：
-webkit-
- オペラ：
-o-
- サファリ：
-webkit-
ほとんどの場合、新しいCSSスタイルプロパティを使用するには、標準のCSSプロパティを使用し、各ブラウザのプレフィックスを追加します。通常のCSSプロパティが最後に来る間に、プレフィックス付きのバージョンが常に最初に表示されます（好きな順序で）。たとえば、ドキュメントにCSS3トランジションを追加する場合は、
遷移
次のようなプロパティがあります。
-webkit- 移行：すべての4秒の容易さ; -moz- 移行：すべての4秒の容易さ; -ミズ- 移行：すべての4秒の容易さ; -o- 移行：すべての4秒の容易さ;移行：すべての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ルールを終了させる別の理由です。そうすれば、完全なブラウザサポートが達成されたら、プレフィックス版を削除することができます。 ブラウザが特定の機能をサポートしているかどうかを知りたいですか？ウェブサイト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ページを作成する場合を除き、古いブラウザをサポートするための創造的なアプローチが必要です。結局、ブラウザのプレフィックスを書くことは、将来のバージョンで修正される可能性が最も高いエラーを見つけて悪用するよりもずっと簡単であり、悪用するために別のエラーを見つける必要があります。 ベンダーの接頭語はハックではありません
ベンダープレフィックスは厄介ですが一時的です
