-webkit-、-ms-など
cssでよく見かけるけどいまいちわかっていない
コピペして何となく使っている
そんな方も多いのでは？

どのブラウザでも同じ見た目、挙動にするために必要な
「ベンダープレフィックス」について整理していきます。

ベンダープレフィックスって？

css3のプロパティの前に記述する識別子です。

ブラウザの種類やバージョンによって、
css3プロパティのサポート状況は異なります。

ブラウザでサポートされていないcss3の拡張機能、
草案段階の仕様を先行実装する為に、ベンダープレフィックスを使用します。

ベンダープレフィックスの種類

-webkit-

Google Chrome、Safari、Microsoft Edge

-moz-

Firefox

-ms-

Internet Explorer

-o-

Opera

注意点

ベンダープレフィックスを使用する際は、
最後にベンダープレフィックスがつかないプロパティを記述ます。

【例】
div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

ベンダープレフィックスが不要になった主要なプロパティ

・background-size
・border-image
・border-radius
・box-shadow
・box-sizing
・opacity
・text-shadow
・transform
・transition

各ブラウザのCSSの対応状況を調べる

以下のサイトで各ブラウザのcssの対応状況を確認することができます。
Can I use