Unformed Building

最近の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つ。

  • IE 10から。標準構文。IE 9以下はCSSグラデーションに対応していない。
  • Firefox 16から。標準構文。-moz-付きのは古い構文扱い。
  • Opera 12.10から。標準構文。-o-付きのは古い構文扱い。
  • Chrome、Safari は-webkit-が必要。古い構文。

CSS Transforms

transform, transform-style, transform-origin, perspective, perspective-origin, backface-visibilityの6つ。

  • IE 10から。IE 9(2Dのみ)は-ms-が必要。
  • Firefox 16から。
  • Opera 12.10から。2D Transformsのみ。12.10時点で3D Transformsは未対応。
  • Chrome、Safariは-webkit-が必要。

CSS Transitions

transition, transitoin-property, transition-duration, transition-timing-function, transition-delayの5つ。

  • IE 10から。IE 9以下はCSS Transitions に対応していない。
  • Firefox 16から。
  • Opera 12.10から。
  • Chrome、Safariは-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ルール。

  • IE 10から。IE 9以下は CSS Animationsに対応していない。
  • Firefox 16から。
  • Opera 12.10から。
  • Chrome、Safariは-webkit-が必要。

CSS Flexible Box

display: flex;, display: inline-flex;flex-direction, flex-wrap, flex-flow, order, flex, flex-grow, flex-shrink, flex-basisの8つ。

  • IE 10は-ms-が必要。古い構文(-ms-flexbox)。IE 9以下はFlexible Boxに対応していない。
  • Firefox 16は-moz-が必要。古い構文(-moz-box)。標準構文でunprefixedはFirefox 18か19っぽい。 Firefox 18で実装されるかどうかは分からないようです。
    (参考:http://myakura.hatenablog.com/entry/2012/10/01/003413

    Firefox 16はdisplay: -moz-boxが実装されていますが、現在のものとはかなり異なる構文なので注意が必要です。
  • Opera 12.10から。標準構文。12.00 以下はFlexible Boxに対応していない。
  • Chrome devだと標準構文に-webit-つけたもの(-webkit-flex)。
    安定版でも大丈夫だそうです。
  • Safari 6では実装されていないようだ。

font-feature-settingsプロパティ

  • IE 10から。IE 9以下は対応していない。
  • Firefoxは-moz-が必要。
  • Operaは未対応。
  • Chromeは-webkit-が必要。
  • Safariは未対応。

calc()関数

  • IE 9から。
  • Firefox 16から。
  • Operaは未対応。
  • Chrome、Safariは-webkit-が必要。

モバイルブラウザは自分で調べてね!
間違っていたり、何か抜けているものがあったら教えてください。