ベンダープレフィックスの整理整頓
Updated / Published
2013年はGoogleがApple主導で開発していたWebkitから分離し、ChromeとOperaがレンダリングエンジンをBlinkへと切り替える大きな出来事がありましたので、ブラウザベンダーが勧告予定のCSS仕様の先攻実装を示すベンダープレフィックス（接頭辞）の整理整頓についてまとめてみましょう。
各情報の出典としてはCan I useを利用しており、各UA名称部分はIEはデスクトップ版Microsoft Internet Explorer, Chromeはデスクトップ版Google Chrome, Firefoxはデスクトップ版Mozilla Firefox, Safariはデスクトップ版Safari, Operaはデスクトップ版Opera, iOSはiOS Safari, AndroidはAndroid Browserを示すものとします。
- A
- B
- C
- F
- H
- L
- P
- R
- T
- U
- おまけ
- 2013年末時点で付ける必要のあるベンダー識別子一覧表
animation
- IE
- IE10よりサポート
- Chrome
- Chrome4より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Firefox
- Firefox5より15まで-moz-のベンダー識別子付きで先攻実装
Firefox16よりサポート - Safari
- Safari4.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Opera
- Opera12.0で-o-のベンダー識別子付きで先攻実装
Opera12.1よりサポート
Opera15より-webkit-のベンダー識別子付きで先攻実装 - iOS
- iOS3.2より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Android
- Android2.1より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし
animationはショートハンドなので、animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-modeの各プロパティも同じとします。
Operaがいったり来たりでややこしいですが、Opera12.1よりサポートしているので旧Presto版Operaのことを考慮しても、ベンダー識別子は不要です。BlinkとWebkit関連のみベンダー識別子が必要ということで、animationのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。
.sample{
-webkit-animation : sample 1s linear 1 ;
animation : sample 1s linear 1 ;
}
@-webkit-keyframes sample{
0%{
width : 0 ;
}
100%{
width : 100px ;
}
}
@keyframes sample{
0%{
width : 0 ;
}
100%{
width : 100px ;
}
}
@viewport
- IE
- IE10より-ms-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Chrome
- 未サポート
- Firefox
- 未サポート
- Safari
- 未サポート
- Opera
- Opera11より-o-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし
Opera15より未サポート - iOS
- 未サポート
- Android
- 未サポート
サポート状況自体がまだ整っていませんが、@viewportルールのベンダープレフィックスには-ms-と-o-のベンダー識別子を残しておく必要があると言えるでしょう。
@-ms-viewport{
width : device-width ;
initial-scale : 1 ;
}
@-o-viewport {
width : device-width ;
initial-scale : 1 ;
}
@viewport {
width : device-width ;
initial-scale : 1 ;
}backface-visibility
- IE
- IE10よりサポート
- Chrome
- Chrome12より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Firefox
- Firefox10より15まで-moz-のベンダー識別子付きで先攻実装
Firefox16よりサポート - Safari
- Safari4.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Opera
- Opera15より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - iOS
- iOS3.2より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Android
- Android3.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし
backface-visibilityのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。
.sample{
-webkit-backface-visibility : hidden ;
backface-visibility : hidden ;
}background-clip, background-origin, background-size
- IE
- IE9よりサポート
- Chrome
- Chrome1よりサポート
- Firefox
- Firefox4よりサポート
- Safari
- Safari3.0よりサポート
- Opera
- Opera10.5よりサポート
- iOS
- iOS3.2よりサポート
- Android
- Android2.1より2.3まで-webkit-のベンダー識別子付きで先攻実装
Android3.0よりサポート
現時点ではAndroid2.3以前のシェアはまだ30%以上あることから、モバイル対応の必要に応じて、background-clip, background-origin, background-sizeのベンダープレフィックスには-webkit-のベンダー識別子を残しておく必要があると言えるでしょう。
.sample{
-webkit-background-clip : border-box ;
background-clip : border-box ;
-webkit-background-origin : border ;
background-origin : border ;
-webkit-background-size : 100% auto ;
background-size : 100% auto ;
}border-image
- IE
- IE11よりサポート
- Chrome
- Chrome4から15まで-webkit-のベンダー識別子付きで先攻実装
Chrome16よりサポート - Firefox
- Firefox3.5より14まで-moz-のベンダー識別子付きで先攻実装
Firefox15よりサポート - Safari
- Safari3.0より5.1まで-webkit-のベンダー識別子付きで先攻実装
Safari6.0よりサポート - Opera
- Opera11.0から12.1まで-o-のベンダー識別子付きで先攻実装
Opera15よりサポート - iOS
- iOS3.2より5.1まで-webkit-のベンダー識別子付きで先攻実装
iOS6.0よりサポート - Android
- Android2.1より-webkit-のベンダー識別子付きで先攻実装
Android4.4よりサポート
border-imageはショートハンドなので、border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeatの各プロパティも同じとします。
IE11+のサポートであることから現段階ではモバイル専用であれば使い勝手の良いプロパティです。ただし、Androidは先攻実装状態なのと、Operaユーザの大半は旧Presto版Operaから移行していないので、border-imageのベンダープレフィックスには-webkit-と-o-のベンダー識別子のみ残しておく必要があると言えるでしょう。モバイル対応のみであれば、-o-のベンダー識別子は不要でしょう。
.sample{
-webkit-border-image : url(sample.png) 30 30 stretch ;
-o-border-image : url(sample.png) 30 30 stretch ;
border-image : url(sample.png) 30 30 stretch ;
}border-radius
- IE
- IE9よりサポート
- Chrome
- Chrome0.2から4まで-webkit-のベンダー識別子付きで先攻実装
Chrome5よりサポート - Firefox
- Firefox1.7より3.6まで-moz-のベンダー識別子付きで先攻実装
Firefox4よりサポート - Safari
- Safari3.0より4.0まで-webkit-のベンダー識別子付きで先攻実装
Safari5.0よりサポート - Opera
- Opera10.5よりサポート
- iOS
- iOS3.2で-webkit-のベンダー識別子付きで先攻実装
iOS4.0よりサポート - Android
- Android2.1で-webkit-のベンダー識別子付きで先攻実装
Android2.2よりサポート
ご覧の通り、これは意見が分かれるようなことはないでしょう。border-radiusにはベンダープレフィックスは不要です。
.sample{
border-radius : 10px 10px 10px 10px ;
}box-shadow
- IE
- IE9よりサポート
- Chrome
- Chrome1から9まで-webkit-のベンダー識別子付きで先攻実装
Chrome10よりサポート - Firefox
- Firefox3.5より3.6まで-moz-のベンダー識別子付きで先攻実装
Firefox4よりサポート - Safari
- Safari3.0より5.0まで-webkit-のベンダー識別子付きで先攻実装
Safari5.1よりサポート - Opera
- Opera10.5よりサポート
- iOS
- iOS3.2より4.3まで-webkit-のベンダー識別子付きで先攻実装
iOS5.0よりサポート - Android
- Android2.1より3.0まで-webkit-のベンダー識別子付きで先攻実装
Android4.0よりサポート
現時点ではAndroidのシェアの大半はまだ3.0以前であることから、これは意見が分かれることになるでしょう。モバイル対応をどうするかを条件にbox-shadowのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。
.sample{
-webkit-box-shadow : 10px 10px 5px black ;
box-shadow : 10px 10px 5px black ;
}box-sizing
- IE
- IE8よりサポート
- Chrome
- Chrome1から9まで-webkit-のベンダー識別子付きで先攻実装
Chrome10よりサポート - Firefox
- Firefox1.0より-moz-のベンダー識別子付きで先攻実装
幾つかバグがある為、未だベンダー識別子無しの実装は試されていない - Safari
- Safari3.0より5.0まで-webkit-のベンダー識別子付きで先攻実装
Safari5.1よりサポート - Opera
- Opera7よりサポート
- iOS
- iOS3.2より4.3まで-webkit-のベンダー識別子付きで先攻実装
iOS5.0よりサポート - Android
- Android2.1より3.0まで-webkit-のベンダー識別子付きで先攻実装
Android4.0よりサポート
Firefoxでは幾つかバグを抱えているため未だベンダー識別子無しの実装は試されていません。現時点ではAndroidのシェアの大半はまだ3.0以前であることから、モバイル対応が必要か否かに応じて-webkit-のベンダー識別子を残しておく必要があるでしょう。box-sizingのベンダープレフィックスには-webkit-と-moz-のベンダー識別子が必要と言えるでしょう。
.sample{
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
}calc()
- IE
- IE9よりサポート
- Chrome
- Chrome19より25まで-webkit-のベンダー識別子付きで先攻実装
Chrome26よりサポート - Firefox
- Firefox4より15まで-moz-のベンダー識別子付きで先攻実装
Firefox16よりサポート - Safari
- Safari6.0より-webkit-のベンダー識別子付きで先攻実装
Safari6.1, Safari7.0よりサポート - Opera
- Opera15よりサポート
- iOS
- iOS6.0より6.1まで-webkit-のベンダー識別子付きで先攻実装
iOS7よりサポート - Android
- Android4.4よりサポート
SafariとiOSもごく最近の対応になるので、calc()のベンダープレフィックスには-webkit-のベンダー識別子のみが必要と言えるでしょう。
.sample{
width : 98% ; /* IE8以下とAndroid4.3以下用 */
width : -webkit-calc(100% - 20px) ;
width : calc(100% - 20px) ;
}columns
- IE
- IE10よりサポート
- Chrome
- Chrome1より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Firefox
- Firefox9より-moz-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Safari
- Safari3.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Opera
- Opera11.1よりサポート
Opera15より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - iOS
- iOS3.2より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Android
- Android2.1より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし
columnsはショートハンドなので、column-width, column-count, column-gap, column-rule, column-rule-width, column-rule-style, column-rule-color, column-span, column-fillの各プロパティも同じとします。
columnsのベンダープレフィックスには-webkit-, -moz-のベンダー識別子が必要と言えるでしょう。
.sample{
-webkit-columns : 3 ;
-moz-columns : 3 ;
columns : 3 ;
}flex
- IE
- IE10より-ms-のベンダー識別子付きで互換性の無い旧草案仕様を先攻実装
IE11よりサポート - Chrome
- Chrome4より20まで-webkit-のベンダー識別子付きで互換性の無い旧草案仕様を先攻実装
Chrome21より28まで-webkit-のベンダー識別子付きで先攻実装
Chrome29よりサポート - Firefox
- Firefox2より21まで-moz-のベンダー識別子付きで互換性の無い旧草案仕様を先攻実装
Firefox22よりサポート - Safari
- Safari3.0より6.0まで-webkit-のベンダー識別子付きで互換性の無い旧草案仕様を先攻実装
Safari6.1より7.0まで-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Opera
- Opera12.1よりサポート
Opera15より16まで-webkit-のベンダー識別子付きで先攻実装
Opera17よりサポート - iOS
- iOS3.2より6.1まで-webkit-のベンダー識別子付きで互換性の無い旧草案仕様を先攻実装
iOS7.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Android
- Android2.1より-webkit-のベンダー識別子付きで互換性の無い旧草案仕様を先攻実装
Android4.4よりサポート
flex関連のプロパティにはalign-content, align-items, align-self, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, order, display(キーワード：flex, inline-flex )がありますが、これら各プロパティも同じとします。
現在の最終版仕様と互換性の無い草案仕様を実装しているUAが多く非常に複雑です。最終版仕様の実装でないものは、未サポートと考えるべきです。そのためSafari6.1, 7.0とiOS7.0のみを対象と考えて、flex関連には-webkit-のベンダー識別子のみを残しておく必要があるでしょう。
.sample{
display : -webkit-flex ;
display : flex ;
-webkit-flex-flow : row ;
flex-flow : row ;
}
.sample > .children1{
-webkit-flex : 3 1 60% ;
flex : 3 1 60% ;
-webkit-order : 2 ;
order : 2 ;
}
.sample > .children2{
-webkit-flex : 1 6 20% ;
flex : 1 6 20% ;
-webkit-order : 1 ;
order : 1;
}
.sample > .children3{
-webkit-flex : 1 6 20% ;
flex : 1 6 20% ;
-webkit-order : 3 ;
order : 3 ;
}font-feature-settings
- IE
- IE10よりサポート
- Chrome
- Chrome16より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Firefox
- Firefox4より-moz-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Safari
- Safari6.1, 7.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Opera
- Opera15より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - iOS
- iOS7.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Android
- Android4.4より-webkit-のベンダー識別子付きで先攻実装
font-feature-settingsには-webkit-と-moz-のベンダー識別子を残しておく必要があると言えるでしょう。
.sample{
-webkit-font-feature-settings : "hist" ;
-moz-font-feature-settings : "hist" ;
font-feature-settings : "hist" ;
}hyphens
- IE
- IE10より-ms-のベンダー識別子付きで先攻実装サポート
ベンダー識別子なしのサポートは未だなし - Chrome
- Chrome13より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Firefox
- Firefox6より-moz-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Safari
- Safari5.1より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Opera
- Opera15より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - iOS
- iOS4.2より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Android
- 未サポート
ご覧の通りいずれにおいてもベンダー識別子なしのサポートは未だありません。hyphensのベンダープレフィックスには-webkit-, -moz-, -ms-のベンダー識別子を残しておく必要があると言えるでしょう。
.sample{
-webkit-hyphens : manual ;
-moz-hyphens : manual ;
-ms-hyphens : manual ;
hyphens : manual ;
}linear-gradient()
- IE
- IE10よりサポート
- Chrome
- Chrome3から9まで-webkit-のベンダー識別子付きで旧-webkit-gradient(linear,...)ファンクションを先攻実装
Chrome10から25まで-webkit-のベンダー識別子付きで先攻実装
Chrome26よりサポート - Firefox
- Firefox3.6より15まで-moz-のベンダー識別子付きで先攻実装
Firefox16よりサポート - Safari
- safari4.0から5.0まで-webkit-のベンダー識別子付きで旧-webkit-gradient(linear,...)ファンクションを先攻実装
safari5.1から6.0まで-webkit-のベンダー識別子付きで先攻実装
safari6.1, Safari7.0よりサポート - Opera
- Opera11.1より12.0まで-o-のベンダー識別子付きで先攻実装
Opera12.1, Opera15よりサポート - iOS
- iOS3.2から4.3まで-webkit-のベンダー識別子付きで旧-webkit-gradient(linear,...)ファンクションを先攻実装
iOS5.0から6.1まで-webkit-のベンダー識別子付きで先攻実装
iOS7.0よりサポート - Android
- Android2.1から3.0まで-webkit-のベンダー識別子付きで旧-webkit-gradient(linear,...)ファンクションを先攻実装
Android4.0から-webkit-のベンダー識別子付きで先攻実装
Android4.4よりサポート
ややこしくしているのが当初Webkitが旧-webkit-gradient(linear,...)ファンクションを先攻実装したことです。現時点ではAndroidのシェアの大半はまだ3.0以前であること、SafariとiOSもごく最近の対応になるので、-webkit-のベンダー識別子のみを残しておく必要があるでしょう。加えて、Android3.0以前を考慮すると-webkit-gradient(linear,...)ファンクションの記述も未だに必要になります。
linear-gradientは2回にわたり構文変更があるので注意してください。最終仕様では、toキーワードを前につける新しい構文になっています。先攻実装は旧構文やtoなしの構文を指し、サポートはtoキーワード構文のサポートを指します。
.sample{
background : -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000)) ; /*旧構文*/
background : -webkit-linear-gradient(top, #fff, #000) ; /*toなしの旧構文*/
background : linear-gradient(to bottom, #fff, #000) ; /*最終構文*/
}perspective, perspective-origin
- IE
- IE10よりサポート
- Chrome
- Chrome12より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Firefox
- Firefox10より15まで-moz-のベンダー識別子付きで先攻実装
Firefox16よりサポート - Safari
- Safari4.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Opera
- Opera15より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - iOS
- iOS3.2より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Android
- Android3.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし
perspective, perspective-originのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。
.sample{
-webkit-perspective : 500px ;
perspective : 500px ;
-webkit-perspective-origin : 50% 50% ;
perspective-origin : 50% 50% ;
}radial-gradient()
- IE
- IE10よりサポート
- Chrome
- Chrome3から9まで-webkit-のベンダー識別子付きで旧-webkit-gradient(radial,...)ファンクションを先攻実装
Chrome10から25まで-webkit-のベンダー識別子付きで先攻実装
Chrome26よりサポート - Firefox
- Firefox3.6より15まで-moz-のベンダー識別子付きで先攻実装
Firefox16よりサポート - Safari
- safari4.0から5.0まで-webkit-のベンダー識別子付きで旧-webkit-gradient(radial,...)ファンクションを先攻実装
safari5.1から6.0まで-webkit-のベンダー識別子付きで先攻実装
safari6.1, Safari7.0よりサポート - Opera
- Opera11.6より12.0まで-o-のベンダー識別子付きで先攻実装
Opera12.1, Opera15よりサポート - iOS
- iOS3.2から4.3まで-webkit-のベンダー識別子付きで旧-webkit-gradient(radial,...)ファンクションを先攻実装
iOS5.0から6.1まで-webkit-のベンダー識別子付きで先攻実装
iOS7.0よりサポート - Android
- Android2.1から3.0まで-webkit-のベンダー識別子付きで旧-webkit-gradient(radial,...)ファンクションを先攻実装
Android4.0から-webkit-のベンダー識別子付きで先攻実装
Android4.4よりサポート
ややこしくしているのが当初Webkitが旧-webkit-gradient(radial,...)ファンクションを先攻実装したことです。現時点ではAndroidのシェアの大半はまだ3.0以前であること、SafariとiOSもごく最近の対応になるので、-webkit-のベンダー識別子のみを残しておく必要があるでしょう。加えて、Android3.0以前を考慮すると-webkit-gradient(radial,...)ファンクションの記述も未だに必要になります。
.sample{
background : -webkit-gradient(radial, center center, 0, center center, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));
background : -webkit-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
background : radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
}transform, transform-origin(2D)
- IE
- IE9より-ms-のベンダー識別子付きで先攻実装
IE10よりサポート - Chrome
- Chrome1より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Firefox
- Firefox3.5より15まで-moz-のベンダー識別子付きで先攻実装
Firefox16よりサポート - Safari
- Safari3.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Opera
- Opera10.5より12.0まで-o-のベンダー識別子付きで先攻実装
Opera15より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - iOS
- iOS3.2より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Android
- Android2.1より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし
transformとtransform-originの2D構文は同じとします。
現時点でIE9は10%以上のシェアをもっていることと、WebkitとBlink系はベンダー識別子なしのサポートは未だ無いので、2D構文におけるtransition, transform-originのベンダープレフィックスには-webkit-と-ms-のベンダー識別子を残しておく必要があると言えるでしょう。
.sample{
-webkit-transform : rotate(45deg) ;
-ms-transform : rotate(45deg) ;
transform : rotate(45deg) ;
-webkit-transform-origin : 0 0 ;
-ms-transform-origin : 0 0 ;
transform-origin : 0 0 ;
}transform, transform-origin(3D)
- IE
- IE10よりサポート
- Chrome
- Chrome12より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Firefox
- Firefox10より15まで-moz-のベンダー識別子付きで先攻実装
Firefox16よりサポート - Safari
- Safari4.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Opera
- Opera15より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - iOS
- iOS3.2より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Android
- Android3.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし
transformとtransform-originの3D構文は同じとします。
3D構文におけるtransformとtransform-originのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。
.sample{
-webkit-transform : translate3d(100px, 0, 0) ;
transform : translate3d(100px, 0, 0) ;
-webkit-transform-origin : 20px 25px 30px ;
transform-origin : 20px 25px 30px ;
}transform-style
- IE
- 未サポート
- Chrome
- Chrome12より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Firefox
- Firefox10より15まで-moz-のベンダー識別子付きで先攻実装
Firefox16よりサポート - Safari
- Safari4.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Opera
- Opera15より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - iOS
- iOS3.2より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Android
- Android3.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし
transform-styleのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。
.sample{
-webkit-transform-style : preserve-3d ;
transform-style : preserve-3d ;
}transition
- IE
- IE10よりサポート
- Chrome
- Chrome1より25まで-webkit-のベンダー識別子付きで先攻実装
Chrome26よりサポート - Firefox
- Firefox10より15まで-moz-のベンダー識別子付きで先攻実装
Firefox16よりサポート - Safari
- Safari3.0より6.0まで-webkit-のベンダー識別子付きで先攻実装
Safari6.1, Safari7.0よりサポート - Opera
- Opera10.5より12.0まで-o-のベンダー識別子付きで先攻実装
Opera12.1, Opera15よりサポート - iOS
- iOS3.2より6.1まで-webkit-のベンダー識別子付きで先攻実装
iOS7よりサポート - Android
- Android2.1より-webkit-のベンダー識別子付きで先攻実装
Android4.4よりサポート
transitionはショートハンドなので、transition-delay, transition-duration, transition-property, transition-timing-functionの各プロパティも同じとします。
SafariとiOSがごく最近からのサポートなのと、Androidがベンダー識別子なしのサポートは未だ無いので、transitionのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。
.sample{
-webkit-transition : opacity 0.3s ease ;
transition : opacity 0.3s ease ;
}
.sample:hover{
opacity : 0.5 ;
}user-select
- IE
- IE10よりサポート
- Chrome
- Chrome1より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Firefox
- Firefox1より-moz-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Safari
- Safari3.0より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Opera
- Opera15より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - iOS
- iOS3.2より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし - Android
- Android2.1より-webkit-のベンダー識別子付きで先攻実装
ベンダー識別子なしのサポートは未だなし
ご覧の通りいずれにおいてもベンダー識別子なしのサポートは未だありません。user-selectのベンダープレフィックスには-webkit-, -moz-, -ms-のベンダー識別子を残しておく必要があると言えるでしょう。
.sample{
-moz-user-select : none ;
-webkit-user-select : none ;
-ms-user-select : none ;
user-select : none ;
}| animation | -webkit- |
|---|---|
| @viewport | -ms- -o- |
| backface-visibility | -webkit- |
| background-clip, background-origin, background-size | -webkit- |
| border-image | -webkit- -o- |
| border-radius | 不要 |
| box-shadow | -webkit- |
| box-sizing | -webkit- -moz- |
| calc | -webkit- |
| columns | -webkit- -moz- |
| flex | -webkit- |
| font-feature-settings | -webkit- -moz- |
| hyphens | -webkit- -moz- -ms- |
| linear-gradient() | -webkit- |
| perspective, perspective-origin | -webkit- |
| radial-gradient() | -webkit- |
| transform(2D), transform-origin(2D) | -webkit- -ms- |
| transform(3D), transform-origin(3D) | -webkit- |
| transform-style | -webkit- |
| transition | -webkit- |
| user-select | -webkit- -moz- -ms- |