ベンダープレフィックスとは何なのか

CSSにおいて「ベンダープレフィックス」というものがあります。これがどういったものかをご紹介いたします。
多分、名前にピンとこなくても、見れば「あぁ！これか！」ってなる人もいると思います。

ベンダープレフィックスとは？

ベンダープレフィックス（Vendor Prefix）は直訳すると「売り手（Vendor）の接頭辞（Prefix）」という意味になります。ここでいう「売り手」とは、「ブラウザのメーカー」ということになります。

ベンダープレフィックスとは、ブラウザベンダーが独自の拡張機能を実装するとき、あるいは草案段階の仕様を先行実装する場合に付ける接頭辞のことです。プロパティにつけてそれが拡張機能であることを示します。

ベンダープレフィックスは以下の種類があります。

ベンダープレフィックスの書き方は、CSSのプロパティの頭に先程の接頭辞を付けるだけです。
例として「border-radius」にベンダープレフィックスを付けると以下のようになります。

.box{
    -ms-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

書き方の順番は好みで構いませんが、必ずベンダープレフィックスが付かないプロパティを最後に書くようにしてください。

ブラウザのバージョンアップによりプロパティがサポートされた場合、ベンダープレフィックスが付いていると正しく表示されない場合があります。
それを避ける為に、最後にベンダープレフィックスが付かないプロパティを記述する必要があります。

※ちなみにborder-radiusは、各ブラウザの最新版ではサポートされていますので、ベンダープレフィックスを付ける必要はありません。