そのベンダープレフィックス、いつまでつけてるの?

  • 59
    いいね
  • 1
    コメント

※このエントリーは そのベンダープレフィックス、いつまでつけるの? - SDN Memo を書き直したものです。

はじめに

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;  /* iOS8以下やAndroid4.4.4以下対応時のみ */
  -moz-animation: fadeIn 1s ease;     /* もう不要 */
  -ms-animation: fadeIn 1s ease;      /* そんなものはない */
  -o-animation: fadeIn 1s ease;       /* そんなものはない */
  animation: fadeIn 1s ease;
}

@-webkit-keyframes fadeIn {  /* iOS8以下やAndroid4.4.4以下対応時のみ */
  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 を考慮して残すべきかもしれませんがぶっちゃけ4.4.4も時代遅れなので、もうこのように書いてしまえばいいのです。

ベンダープレフィックスなんていらない
#fadeBox {
  animation: fadeIn 1s ease;
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

シンプルになりました。

ベンダープレフィックスを付けなくてもいいプロパティ

以下は最新版だけを考えるとベンダープレフィックスは必要ありません。

  • animation
  • border-image
  • border-radius
  • box-shadow
  • box-sizing
  • text-shadow
  • transform
  • transition
  • @keyframes

iOS 8.0 以下や Android 4.4.x系向けに対応したい場合

シェアはかなり下がりましたが、まだ対応して方がいいかなという場合は以下を併せて使用します。

  • -webkit-animation
  • -webkit-transform
  • @-webkit-keyframes

ベンダープレフィックスはブラウザ独自実装のセレクタ・プロパティでも使用する

-ms-* の項でも少しだけ触れましたが、CSSの仕様には存在しないブラウザ側だけの独自実装の特殊なセレクタ名やプロパティ名にも -moz-*-webkit-* が付きます。

例えば、スマホのタップ時の網掛け色を変える -webkit-tap-highlight-color などなど。

おまけ:Edgeには -webkit-* が使える?!

そのまえに。
Microsoft Edge は Internet Explorer に替わるWindowsの標準ブラウザとして開発が進められているブラウザです。
このブラウザ、知っている人もいるかもしれませんが、ユーザーエージェントが喧嘩売ってるのかという感じのめちゃくちゃなものになっています。

Edgeが吐き出すユーザーエージェント例
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-* の記述に対応しています。
あまり活かせそうにありませんが……