【CSS】そのベンダープレフィックス、もう要らない！ベンダープレフィックスが今後不要なものを羅列する2019

ベンダープレフィックスをどこまで記述するかいつも悩みます。

悩む時間がもったいないので、よく利用するCSSの中でベンダープレフィックスがもう不要というものだけを「、」区切りで羅列しました。「-webkit-」だけ必要なものも羅列しています。
※各アルファベット順

気になる方は、「ブラウザの検索機能」で要素を検索してみてください。見つかれば、ベンダープレフィックスは今後不要ということです。
※あくまで私がよく利用するcssを随時追記しているだけなので、このページにはまだないものもあります。ご了承ください

今後ベンダープレフィックスは不要なプロパティ名／値

下記に羅列しているので、ブラウザの検索機能で知りたいプロパティ名や値を検索してみてください。詳しい判断基準は後述しています。

プロパティ名
border-radius、box-sizing、max-width、min-height、min-width、opacity、transform

値
inline-block（display）

iOSは10以上、Androidは4.4以上がサポートされていなければ、「-webkit-」だけ付けた方が良さそうと判断しています。詳しい判断基準は後述しています。
※サポートされているか不明だったものも念のためこちらに記載

プロパティ名
box-shadow、max-height、text-shadow、text-size-adjust、transition

下記サイトさんでブラウザのシェア状況を調査させていただきました。
StatCounter Global Stats

調査した結果、以下のブラウザバージョンのシェアが高いことが分かりました。

・IE11、Edge最新、Chrome最新、Firefox最新、Safari最新
※下記URLを参考に選出
https://gs.statcounter.com/browser-version-market-share/all/japan/#monthly-201808-201908-bar

・iOSは10以上
※下記URLを参考に選出
https://gs.statcounter.com/ios-version-market-share/mobile-tablet/japan/#monthly-201808-201908-bar

判断基準はこれらのシェアが高いブラウザ（バージョン）にサポートされている「プロパティ」や「値」はベンダープレフィックス不要と判断しました。

つまり、よく使われているブラウザをある程度網羅できていれば、ほとんどの人に正常に見ていただけるだろうという考えです。

上記以外の「プロパティ」や「値」について知りたい方はCan I use…さんを使って確認してみてください。ご要望があれば、代わりに調べてこのページに追記します。
＞Can I use…

使い方は簡単です。

知りたいプロパティ名／値を入力するだけでOKです。

入力すると自動で結果が表示されます。

背景が緑色になっている「ブラウザのバージョン」がサポートされているという意味です。気になるブラウザのバージョンの背景の色を確認してみてください。背景が緑ならOKなので、プレフィックスは不要だと思いますよ。

下記のサイト様を参考にさせていただきました。

それでは、最後までお読みいただきありがとうございました！