最近のCSS実装でベンダー接頭辞の外れたもの 2012年11月
公開:
更新:
Firefox 16、Opera 12.10、そしてInternet Explorer 10がリリースされました(Windows 7のIE 10はまだですが)。
その中で、CSSのベンダー接頭辞が外れたものをまとめてみます。CSS Gradients
liner-gradient()
, repeating-linear-gradient()
, radial-gradient()
, repeating-radial-gradient()
の4つ。-moz-
付きのは古い構文扱い。-o-
付きのは古い構文扱い。-webkit-
が必要。古い構文。CSS Transforms
transform
, transform-style
, transform-origin
, perspective
, perspective-origin
, backface-visibility
の6つ。-ms-
が必要。-webkit-
が必要。CSS Transitions
transition
, transitoin-property
, transition-duration
, transition-timing-function
, transition-delay
の5つ。-webkit-
が必要。CSS Animations
animation
, animation-name
, animation-duration
, animation-delay
, animation-timing-function
, animation-iteration-count
, animation-direction
, animation-play-state
, animation-fill-mode
の9つと@keyframes
ルール。-webkit-
が必要。CSS Flexible Box
display: flex;
, display: inline-flex;
とflex-direction
, flex-wrap
, flex-flow
, order
, flex
, flex-grow
, flex-shrink
, flex-basis
の8つ。-ms-
が必要。古い構文(-ms-flexbox
)。IE 9以下はFlexible Boxに対応していない。Firefox 16はFirefox 18で実装されるかどうかは分からないようです。-moz-
が必要。古い構文(-moz-box
)。標準構文でunprefixedはFirefox 18か19っぽい。
(参考:http://myakura.hatenablog.com/entry/2012/10/01/003413)
Firefox 16はdisplay: -moz-box
が実装されていますが、現在のものとはかなり異なる構文なので注意が必要です。-webit-
つけたもの(-webkit-flex
)。
安定版でも大丈夫だそうです。font-feature-settings
プロパティ-moz-
が必要。-webkit-
が必要。calc()
関数-webkit-
が必要。
モバイルブラウザは自分で調べてね!
間違っていたり、何か抜けているものがあったら教えてください。