# はじめに
CSS3が本格的に普及してきて使用する機会がどんどん増えていっているかと思います。
しかし、ブラウザのバージョンによってはベンダープレフィックスを付けないと効かないものもまだまだあります。
ベンダープレフィックスといえば、-webkit-、-moz-、-ms-、-o- などが思い浮かぶかと思いますが、ぶっちゃけるとほとんどのCSS3のプロパティはベンダープレフィックスなしでも大丈夫になってきました。
特にIE以外のブラウザというのは常に最新バージョンにアップデートされていくので、ベンダープレフィックスなしでどんどん対応していっています。
# 何でもかんでもベンダープレフィックスつけていませんか？
とりあえず、すべてのブラウザに対応するようにベンダープレフィックスつけておけば安心なんて思わずに、必要のない記述はどんどん減らしていきましょう。
## -o-* というベンダープレフィックスは既に過去のもの
顔文字ではない (-o-*)
この -o-* は元々はOpera用のベンダープレフィックスでした。
しかしそれはもう過去の事であり、今のOperaはBlink（WebKitから分岐したHTMLレンダリングエンジンで、Chromeもこれをベースにしている）を使用しているので -webkit-* を使用する事になります。
もう -o-* とかいうベンダープレフィックスは必要ありません。
さようなら。
## -ms-* は試験段階・IE独自実装のセレクタ・プロパティに使うもの
Internet Explorer や Microsoft Edge 向けに -ms-* というベンダープレフィックスがありますが、通常これは将来実装されるかもしれない試験段階・独自実装のセレクタやプロパティのみに使用するものであり、通常のCSSで使用する事はほぼ皆無といえます。
IEが対応していないCSSのプロパティはいくら -ms-* を付けたところで無駄という事です。諦めてください。
# そもそも存在しないベンダープレフィックスを書かない！
前の項と若干かぶりますが、様々なサイトの記述やサンプルとして提示している記述を見ていると、やたらたくさんベンダープレフィックスを付けているプロパティを見かけますが、そもそも存在しないベンダープレフィックスプロパティも書かれていてすごく無意味です。
MDNでも無駄な記述がされている事があったりします。
例えばCSSアニメーションの animation プロパティなんかは特に無駄な記述が目立つ気がします。
#fadeBox {
-webkit-animation: fadeIn 1s ease; /* 不要 */
-moz-animation: fadeIn 1s ease; /* 不要 */
-ms-animation: fadeIn 1s ease; /* そんなものはない */
-o-animation: fadeIn 1s ease; /* そんなものはない */
animation: fadeIn 1s ease;
}
@-webkit-keyframes fadeIn { /* 不要 */
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fadeIn { /* 不要 */
0% {opacity: 0;}
100% {opacity: 1;}
}
@-ms-keyframes fadeIn { /* ないものはない！ */
0% {opacity: 0;}
100% {opacity: 1;}
}
@-o-keyframes fadeIn { /* ないって言ってるでしょ！ */
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
無駄ですね。
-webkit-* に関しては、Android 4.4.4 などの古いスマホをを考慮して記述している場合もあったりしますが既に時代遅れなので、もうこのように書いてしまえばいいのです。
#fadeBox {
animation: fadeIn 1s ease;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
シンプルになりました。
## ベンダープレフィックスを付けなくてもいいプロパティ
以下はベンダープレフィックスは必要ありません。
animationborder-imageborder-radiusbox-shadowbox-sizingtext-shadowtransformtransition@keyframes
# ベンダープレフィックスはブラウザ独自実装のセレクタ・プロパティでも使用する
-ms-* の項でも少しだけ触れましたが、CSSの仕様には存在しないブラウザ側だけの独自実装の特殊なセレクタ名やプロパティ名にも -moz-* や -webkit-* が付きます。
例えば、スマホのタップ時の網掛け色を変える -webkit-tap-highlight-color などなど。
# おまけ：Edgeには -webkit-* が使える？！
そのまえに。
Microsoft Edge は Internet Explorer に替わるWindowsの標準ブラウザとして開発が進められているブラウザです。
このブラウザ、知っている人もいるかもしれませんが、ユーザーエージェントが喧嘩売ってるのかという感じのめちゃくちゃなものになっています。
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393
レンダリングエンジンは EdgeHTML というものを使っているのに AppleWebKit/xxx.xx (KHTML, like Gecko) と名乗っていたり、他のブラウザである Chrome や Safari の文字さえあります。なんじゃこりゃ。
Edgeはユーザーエージェントからもわかるように、ChromeやSafariにも引けを取らない、WebKitっぽいブラウザだよと自負しているようです。
Chromeを名乗るのであればChromeで動くコードを Edgeでも動くようにしろよ！ アホか！！
……で、話がかなり脱線しましたが、Edge はこのようなふるまいをするので、なんと -webkit-* の記述に対応しています。
あまり活かせそうにありませんが……
[2020/01/21追記]
Microsoft Edge もついにBlinkになるということで、実質Chromeとほぼ同じになりました。
ざっと確認したところ、-webkit-* は当然のように対応していて、 -ms-* 系は使えなくなったようです。