
ベンダープレフィックスをどこまで記述するかいつも悩みます。
悩む時間がもったいないので、よく利用するCSSの中でベンダープレフィックスがもう不要というものだけを「、」区切りで羅列しました。「-webkit-」だけ必要なものも羅列しています。※各アルファベット順
ブラウザの検索機能で気になる要素を検索してください。見つかれば、ベンダープレフィックスは今後不要です。
※あくまで私がよく利用するcssを随時追記しているだけなので、このページにはまだないものもあります。ご了承ください
今後ベンダープレフィックスは不要なプロパティ名/値
下記に羅列しているので、ブラウザの検索機能で知りたいプロパティ名や値を検索してみてください。詳しい判断基準は後述しています。
プロパティ名
border-radius、box-sizing、max-width、min-height、min-width、opacity、transform
値
inline-block(display)
「-webkit-」だけ付けた方が良さそうなプロパティ名/値
iOSは10以上、Androidは4.4以上がサポートされていなければ、「-webkit-」だけ付けた方が良さそうと判断しています。詳しい判断基準は後述しています。
※サポートされているか不明だったものも念のためこちらに記載
プロパティ名
box-shadow、max-height、text-shadow、text-size-adjust、transition
判断基準
以下のブラウザバージョンがサポートされていればベンダープレフィックス不要と判断します。
下記サイト様で調査させていただきました。
StatCounter Global Stats
https://gs.statcounter.com/browser-version-market-share/all/japan/#monthly-201808-201908-bar
⇒IE11、Edge最新、Chrome最新、Firefox最新、Safari最新
https://gs.statcounter.com/ios-version-market-share/mobile-tablet/japan/#monthly-201808-201908-bar
⇒iOSは10以上
https://gs.statcounter.com/android-version-market-share/mobile-tablet/japan/#monthly-201808-201908-bar
⇒Android4.4以上
見つからなかった場合は、Can I useさんで確認する
さて、上で見つからなかった場合です。すみません、後はCan I useさん頼りです。下記にリンクを掲載させていただきます。
>Can I use…
使い方は簡単です。

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

Enterすら要りません。

入力すると結果が表示されます。背景が緑のブラウザのバージョンにはサポートされています。ご自身が対応したいブラウザのバージョンの背景が緑になっているか確認してみてください。
参考サイト(ページ)
下記のサイト様を参考にさせていただきました。