コーディングを行っている際に現在のCSSのベンダープレフィックスが気になったので調べてみました。

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

ベンダープレフィックスとは、ブラウザが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。
「-webkit-」や「-mos-」などを先行実装のプロパティの先頭につけてどのブラウザなのかを特定しています。
仕様変更される可能性があるので、つけることが推奨されています。

ベンダープレフィックスが必要なCSS

今回はCSS3の一部のプロパティを「Can I use」を使って調べてみました。

• border-image IE6-10はサポートされていない「-webkit-」旧Androidブラウザ対応に必要
• transform() 「-ms-」IE9対応に必要 「-webkit-」Androidブラウザ・旧iOS Safari対応に必要
• filter IE11はサポートされていない,「-webkit-」Androidブラウザ・旧iOS Safari対応に必要
• CSS Flexible Box Layout Module 「-ms-」IE10対応に必要「-webkit-」Androidブラウザ・旧iOS Safari対応に必要
• CSS Grid Layout 「-ms-」IE11・Edge12-15対応に必要

まとめ

ベンダープレフィックスが必要なプロパティはPCではほとんどが対応されていますがAndroidブラウザなどのスマートフォンサイトではまだ必要になっている状況です。
ただ今後もCSSのバージョンアップなどがあり、新しいプロパティが増えると思いますので引き続き調べていこうかと思います。