最近の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-が必要。
モバイルブラウザは自分で調べてね!
間違っていたり、何か抜けているものがあったら教えてください。