2013.10.252013年はGoogleがApple主導で開発していたWebkitから分離し、ChromeとOperaがレンダリングエンジンをBlinkへと切り替える大きな出来事がありましたので、ブラウザベンダーが勧告予定のCSS仕様の先攻実装を示すベンダープレフィックス(接頭辞)の整理整頓についてまとめてみましょう。Browserを示すものとします。animation-fill-modeの各プロパティも同じとします。Operaがいったり来たりでややこしいですが、Opera12.1よりサポートしているので旧Presto版Operaのことを考慮しても、ベンダー識別子は不要です。BlinkとWebkit関連のみベンダー識別子が必要ということで、animationのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。;}}@viewportIEIE10より-ms-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしChrome未サポートFirefox未サポートSafari未サポートOperaOpera11より-o-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしOpera15より未サポートiOS未サポートAndroid未サポートサポート状況自体がまだ整っていませんが、@viewportルールのベンダープレフィックスには-ms-と-o-のベンダー識別子を残しておく必要があると言えるでしょう。;}backface-visibilityIEIE10よりサポートChromeChrome12より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしFirefoxFirefox10より15まで-moz-のベンダー識別子付きで先攻実装Firefox16よりサポートSafariSafari4.0より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしOperaOpera15より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしiOSiOS3.2より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしAndroidAndroid3.0より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしbackface-visibilityのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。background-sizeのベンダープレフィックスには-webkit-のベンダー識別子を残しておく必要があると言えるでしょう。border-image-repeatの各プロパティも同じとします。IE11+のサポートであることから現段階ではモバイル専用であれば使い勝手の良いプロパティです。Androidは先攻実装状態なのと、Operaユーザの大半は旧Presto版Operaから移行していないので、border-imageのベンダープレフィックスには-webkit-と-o-のベンダー識別子のみ残しておく必要があると言えるでしょう。モバイル対応のみであれば、-o-のベンダー識別子は不要でしょう。;}border-radiusIEIE9よりサポートChromeChrome0.2から4まで-webkit-のベンダー識別子付きで先攻実装Chrome5よりサポートFirefoxFirefox1.7より3.6まで-moz-のベンダー識別子付きで先攻実装Firefox4よりサポートSafariSafari3.0より4.0まで-webkit-のベンダー識別子付きで先攻実装Safari5.0よりサポートOperaOpera10.5よりサポートiOSiOS3.2で-webkit-のベンダー識別子付きで先攻実装iOS4.0よりサポートAndroidAndroid2.1で-webkit-のベンダー識別子付きで先攻実装Android2.2よりサポートご覧の通り、これは意見が分かれるようなことはないでしょう。border-radiusにはベンダープレフィックスは不要です。;}box-shadowIEIE9よりサポートChromeChrome1から9まで-webkit-のベンダー識別子付きで先攻実装Chrome10よりサポートFirefoxFirefox3.5より3.6まで-moz-のベンダー識別子付きで先攻実装Firefox4よりサポートSafariSafari3.0より5.0まで-webkit-のベンダー識別子付きで先攻実装Safari5.1よりサポートOperaOpera10.5よりサポートiOSiOS3.2より4.3まで-webkit-のベンダー識別子付きで先攻実装iOS5.0よりサポートAndroidAndroid2.1より3.0まで-webkit-のベンダー識別子付きで先攻実装Android4.0よりサポート現時点ではAndroidのシェアの大半はまだ3.0以前であることから、これは意見が分かれることになるでしょう。モバイル対応をどうするかを条件にbox-shadowのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。幾つかバグがある為、未だベンダー識別子無しの実装は試されていないSafariSafari3.0より5.0まで-webkit-のベンダー識別子付きで先攻実装Safari5.1よりサポートOperaOpera7よりサポートiOSiOS3.2より4.3まで-webkit-のベンダー識別子付きで先攻実装iOS5.0よりサポートAndroidAndroid2.1より3.0まで-webkit-のベンダー識別子付きで先攻実装Android4.0よりサポートFirefoxでは幾つかバグを抱えているため未だベンダー識別子無しの実装は試されていません。現時点ではAndroidのシェアの大半はまだ3.0以前であることから、モバイル対応が必要か否かに応じて-webkit-のベンダー識別子を残しておく必要があるでしょう。box-sizingのベンダープレフィックスには-webkit-と-moz-のベンダー識別子が必要と言えるでしょう。Safari7.0よりサポートOperaOpera15よりサポートiOSiOS6.0より6.1まで-webkit-のベンダー識別子付きで先攻実装iOS7よりサポートAndroidAndroid4.4よりサポートSafariとiOSもごく最近の対応になるので、calc()のベンダープレフィックスには-webkit-のベンダー識別子のみが必要と言えるでしょう。column-fillの各プロパティも同じとします。-moz-のベンダー識別子が必要と言えるでしょう。)がありますが、これら各プロパティも同じとします。現在の最終版仕様と互換性の無い草案仕様を実装しているUAが多く非常に複雑です。最終版仕様の実装でないものは、未サポートと考えるべきです。7.0とiOS7.0のみを対象と考えて、flex関連には-webkit-のベンダー識別子のみを残しておく必要があるでしょう。7.0より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしOperaOpera15より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしiOSiOS7.0より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしAndroidAndroid4.4より-webkit-のベンダー識別子付きで先攻実装font-feature-settingsには-webkit-と-moz-のベンダー識別子を残しておく必要があると言えるでしょう。;}hyphensIEIE10より-ms-のベンダー識別子付きで先攻実装サポートベンダー識別子なしのサポートは未だなしChromeChrome13より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしFirefoxFirefox6より-moz-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしSafariSafari5.1より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしOperaOpera15より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしiOSiOS4.2より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしAndroid未サポートご覧の通りいずれにおいてもベンダー識別子なしのサポートは未だありません。-ms-のベンダー識別子を残しておく必要があると言えるでしょう。Opera15よりサポートiOSiOS3.2から4.3まで-webkit-のベンダー識別子付きで旧-webkit-gradient(linear,...)ファンクションを先攻実装iOS5.0から6.1まで-webkit-のベンダー識別子付きで先攻実装iOS7.0よりサポートAndroidAndroid2.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キーワード構文のサポートを指します。perspective-originのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。Opera15よりサポートiOSiOS3.2から4.3まで-webkit-のベンダー識別子付きで旧-webkit-gradient(radial,...)ファンクションを先攻実装iOS5.0から6.1まで-webkit-のベンダー識別子付きで先攻実装iOS7.0よりサポートAndroidAndroid2.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,...)ファンクションの記述も未だに必要になります。transform-origin(2D)IEIE9より-ms-のベンダー識別子付きで先攻実装IE10よりサポートChromeChrome1より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしFirefoxFirefox3.5より15まで-moz-のベンダー識別子付きで先攻実装Firefox16よりサポートSafariSafari3.0より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしOperaOpera10.5より12.0まで-o-のベンダー識別子付きで先攻実装Opera15より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしiOSiOS3.2より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしAndroidAndroid2.1より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしtransformとtransform-originの2D構文は同じとします。transform-originのベンダープレフィックスには-webkit-と-ms-のベンダー識別子を残しておく必要があると言えるでしょう。transform-origin(3D)IEIE10よりサポートChromeChrome12より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしFirefoxFirefox10より15まで-moz-のベンダー識別子付きで先攻実装Firefox16よりサポートSafariSafari4.0より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしOperaOpera15より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしiOSiOS3.2より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしAndroidAndroid3.0より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしtransformとtransform-originの3D構文は同じとします。3D構文におけるtransformとtransform-originのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。;}transform-styleIE未サポートChromeChrome12より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしFirefoxFirefox10より15まで-moz-のベンダー識別子付きで先攻実装Firefox16よりサポートSafariSafari4.0より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしOperaOpera15より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしiOSiOS3.2より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしAndroidAndroid3.0より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしtransform-styleのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。transition-timing-functionの各プロパティも同じとします。SafariとiOSがごく最近からのサポートなのと、Androidがベンダー識別子なしのサポートは未だ無いので、transitionのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。;}user-selectIEIE10よりサポートChromeChrome1より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしFirefoxFirefox1より-moz-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしSafariSafari3.0より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしOperaOpera15より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしiOSiOS3.2より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしAndroidAndroid2.1より-webkit-のベンダー識別子付きで先攻実装ベンダー識別子なしのサポートは未だなしご覧の通りいずれにおいてもベンダー識別子なしのサポートは未だありません。-ms-のベンダー識別子を残しておく必要があると言えるでしょう。;}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-CSSで計算式を可能にするcalc()ファンクションWeb制作にGPU処理を取り入れるContactWeb制作に関するご相談、お気軽にお問い合わせください。StandardsAppendixBlogWorksAboutコンセプト会社概要デザイナー募集ContactSubscribeTwitterFacebookGoogle+。