ベンダープレフィックスの整理整頓

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 ;
}
2013年末時点で付ける必要のあるベンダー識別子一覧表
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-
Updated / Published