ベンダーprefix(-webkit/-moz/-o/-ms)の要否まとめ 2015/6

CSSによるリッチな表現が手軽になりましたが、はじめに各ブラウザが独自に導入した経緯から、各ブラウザ用に個別に定義するベンダープレフィックスが必要です。
ほんの数年前までは必須でしたが、だんだん必要がなくなってきています。
まとめてある情報をネットで簡単に見つけることができますが、あっという間に古い情報になってしまうため、今回は2015年6月時点ということでまとめてみました。

広告

ベンダーprefix調査結果一覧表

このページを実際に各ブラウザで確認しています。ただしIEは実機ではなく、IE11のシミュレーターを使用しています。
弊社でよく使うスタイル(プロパティ)を調査する対象に挙げました。これ以外については、別途調査・対応が必要です。

要注意ブラウザ

ブラウザSafariAndroid標準IE
OSOS XiOSAndroid4.4Android2.3Windows
バージョン
(Webkitバージョン)
8.0
(600.1.25)
5.1.7
(534.59.10)
8.0
(600.1.4)
4.0
(537.36)
4.0
(533.1)
1098
box-shadow不要不要不要不要webkit不要不要未対応
text-shadow不要不要不要不要不要不要未対応未対応
border-radius不要不要不要不要不要不要不要未対応
box-sizing不要不要不要不要webkit不要不要不要
linear-gradient不要webkit
-linear
-gradient
不要不要webkit
-gradient
不要未対応未対応
radial-gradient不要webkit
-linear
-gradient
不要不要webkit
-gradient
不要未対応未対応
transition不要webkit不要不要webkit不要未対応未対応
animation
keyframes
webkitwebkitwebkitwebkitwebkit不要未対応未対応
border-image不要webkit不要不要webkit未対応未対応未対応
transform
:rotate
:scale
:skew
webkitwebkitwebkitwebkitwebkit不要不要未対応

2016年1月13日)IE8でbox-sizingが未対応としていましたが誤りでしたので訂正いたします。

開発者にやさしいブラウザ

ブラウザーIE11ChromeFirefoxOpera
OSWindowsWindowsAndroidWindowsAndroidWindowsAndroid
バージョン11.0.1843.0.235743.0.235738.038.030.0.183543.0.2357
box-shadow不要
text-shadow
border-radius
box-sizing
linear-gradient
radial-gradient
transition
animation
border-image
transform
:rotate
:scale
:skew

要注意ブラウザのシェア

ブラウザIE8IE9IE10Android2.3
シェア2.62%3.71%2.01%5.6%
(PCブラウザ内)(Android端末内)
参考媒体株式会社ウェブレッジ様のブラウザシェアランキングAndroid Developers
調査日2015年5月2015年1月
広告

結論

  • スマホ対応サイトか
  • Safari5以下(Snow Leopard以前のMac、Windows版)とAndroid2.3を対象にするか
  • バージョンアップをしていないブラウザを対象にするか

といった基準によって以下の4つのプランが検討対象になるかと思いますが、現実的にはプラン2かプラン3を選択すれば無難かと思います。
尚、スタイルによってIE8~10以下が未対応になる点は、ここから除外しています。
2015年6月26日)ブラウザシェアについて調べた内容を参考に、対象シェア予想を追記しました。IE10以下を5%、OS XのSafariを1%、バージョンアップしていないFirefox・Operaを1%とした場合の予想値です。

ベンダープレフィックスを付ける対象対象ブラウザ対象シェア予想
(全OS・ブラウザを100%とする)
プラン1
付けないプラン(Windows PCサイト向け)
なしOS X(Safari)を除くPC系ブラウザ91%*1
プラン2
Safari5以下、Android2.3を無視するプラン
-webkit-animation
-webkit-keyframes
-webkit-transform
古いSafari5、Android2.3、を除くPC・スマホブラウザ92%
プラン3
Safari5以下、Android2.3を含むプラン
-webkit-box-shadow
-webkit-box-sizing
gradient系(以下で説明)
-webkit-transition
-webkit-animation
-webkit-keyframes
-webkit-border-image
-webkit-transform
古いSafari5、Android2.3を含むPC・スマホブラウザ94%
プラン4
全部つけるプラン
-moz/-ms/-oを含む全部バージョンアップをしていないブラウザを含むPC・スマホブラウザ95%

*1) スマホの45~60%がanimation/keyframes/transformに未対応となります。プラン1はanimationやtransformを使うスマホ対応サイトには向きません。

不要なベンダープレフィックスは、閲覧者にデメリットとはなりません。よって、コーディング作業が増えるという作成者のデメリットに目をつぶれば、過剰に付けても構わないし、また既に設置したベンダープレフィックスをわざわざ外す必要はありません。

webkit-gradientとwebkit-linear(radial)-gradientの記述に注意

上で説明したプラン3・プラン4の場合は、gradientを使う際に注意が必要です。プラン2の場合はここは無視できます。

linear-gradient

linear-gradientの第一引数は、CSS3ではグラデーションの終点を指しますが、-webkit-linear-gradientでは始点を指します。-webkit-gradientでは、linearの指定と始点終点の指定が必要です。

  • CSS3
    linear-gradient(to bottom, #000, #999 80%, #fff)
  • -webkit追記型
    -weblit-linear-gradient(top, #000, #999 80%, #fff)
  • -webkit-gradient
    -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(0.8, #999), to(#f00) )

尚、-webkit-linear-gradientを理解できるブラウザは-webkit-gradient(linear)またはlinear-gradientを理解できるので、無視することができます。
一方、バージョンアップしていないブラウザ対策と考えれば、-moz-linear-gradientなどは「-webkit追記型」に倣って記述する必要があります。

radial-gradient

radial-gradientは、CSS3では「サイズ at 位置」となるところが、-webkit-radial-gradientでは「位置,サイズ」となります。-webkit-gradientでは、radialの指定の後、「開始位置,グラデーション開始位置,終了位置,グラデーション終了位置」と記述する必要があります。

  • CSS3
    radial-gradient(10px 10px at center center, #000, #999 80%, #fff)
  • -webkit追記型
    -webkit-radial-gradient(center center, 10px 10px, #000, #999 80%, #fff)
  • -webkit-gradient
    -webkit-gradient(radial, center center, 0, center center, 10, from(#000), color-stop(0.8, #999), to(#f00) )

linear-gradientと違い、-webkit-radial-gradientと-webkit-gradient(radial)は描写が異なるので、わざわざでも2つ書いた方が無難です。
特に、-webkit-gradient(radial)では楕円が描写できないため、楕円を使う場合は、Safari5以下用に-webkit-radial-gradientが必須となります。
linear-gradient同様、バージョンアップしていないブラウザ対策の場合は、-moz-radial-gradientなどは「-webkit追記型」に倣って記述する必要があります。

2015/6/16