CSSによるリッチな表現が手軽になりましたが、はじめに各ブラウザが独自に導入した経緯から、各ブラウザ用に個別に定義するベンダープレフィックスが必要です。
ほんの数年前までは必須でしたが、だんだん必要がなくなってきています。
まとめてある情報をネットで簡単に見つけることができますが、あっという間に古い情報になってしまうため、今回は2015年6月時点ということでまとめてみました。
このページを実際に各ブラウザで確認しています。ただしIEは実機ではなく、IE11のシミュレーターを使用しています。
弊社でよく使うスタイル(プロパティ)を調査する対象に挙げました。これ以外については、別途調査・対応が必要です。
ブラウザ | Safari | Android標準 | IE | |||||
OS | OS X | iOS | Android4.4 | Android2.3 | Windows | |||
バージョン (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) | 10 | 9 | 8 |
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 | webkit | webkit | webkit | webkit | webkit | 不要 | 未対応 | 未対応 |
border-image | 不要 | webkit | 不要 | 不要 | webkit | 未対応 | 未対応 | 未対応 |
transform :rotate :scale :skew | webkit | webkit | webkit | webkit | webkit | 不要 | 不要 | 未対応 |
2016年1月13日)IE8でbox-sizingが未対応としていましたが誤りでしたので訂正いたします。
ブラウザー | IE11 | Chrome | Firefox | Opera | |||
OS | Windows | Windows | Android | Windows | Android | Windows | Android |
バージョン | 11.0.18 | 43.0.2357 | 43.0.2357 | 38.0 | 38.0 | 30.0.1835 | 43.0.2357 |
box-shadow | 不要 | ||||||
text-shadow | |||||||
border-radius | |||||||
box-sizing | |||||||
linear-gradient | |||||||
radial-gradient | |||||||
transition | |||||||
animation | |||||||
border-image | |||||||
transform :rotate :scale :skew |
ブラウザ | IE8 | IE9 | IE10 | Android2.3 |
シェア | 2.62% | 3.71% | 2.01% | 5.6% |
(PCブラウザ内) | (Android端末内) | |||
参考媒体 | 株式会社ウェブレッジ様のブラウザシェアランキング | Android Developers | ||
調査日 | 2015年5月 | 2015年1月 |
といった基準によって以下の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を使うスマホ対応サイトには向きません。
不要なベンダープレフィックスは、閲覧者にデメリットとはなりません。よって、コーディング作業が増えるという作成者のデメリットに目をつぶれば、過剰に付けても構わないし、また既に設置したベンダープレフィックスをわざわざ外す必要はありません。
上で説明したプラン3・プラン4の場合は、gradientを使う際に注意が必要です。プラン2の場合はここは無視できます。
linear-gradientの第一引数は、CSS3ではグラデーションの終点を指しますが、-webkit-linear-gradientでは始点を指します。-webkit-gradientでは、linearの指定と始点終点の指定が必要です。
尚、-webkit-linear-gradientを理解できるブラウザは-webkit-gradient(linear)またはlinear-gradientを理解できるので、無視することができます。
一方、バージョンアップしていないブラウザ対策と考えれば、-moz-linear-gradientなどは「-webkit追記型」に倣って記述する必要があります。
radial-gradientは、CSS3では「サイズ at 位置」となるところが、-webkit-radial-gradientでは「位置,サイズ」となります。-webkit-gradientでは、radialの指定の後、「開始位置,グラデーション開始位置,終了位置,グラデーション終了位置」と記述する必要があります。
linear-gradientと違い、-webkit-radial-gradientと-webkit-gradient(radial)は描写が異なるので、わざわざでも2つ書いた方が無難です。
特に、-webkit-gradient(radial)では楕円が描写できないため、楕円を使う場合は、Safari5以下用に-webkit-radial-gradientが必須となります。
linear-gradient同様、バージョンアップしていないブラウザ対策の場合は、-moz-radial-gradientなどは「-webkit追記型」に倣って記述する必要があります。