最近の CSS 実装でベンダー接頭辞の外れたもの (2012年11月)

Category : CSS

Firefox 16, Opera 12.10, そして Internet Explorer 10 がリリースされました (Windows 7 の IE10 はまだですが)。
その中で、CSS のベンダー接頭辞が外れたものをまとめてみます。

CSS Gradients

liner-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient() の4つ。

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

CSS Transforms

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

  • IE10 から。IE9 (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つ。

  • IE10 から。IE9 以下は 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 ルール。

  • IE10 から。IE9 以下は 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つ。

  • IE10 は -ms- が必要。古い構文 (-ms-flexbox)。IE9 以下は Flexible Box に対応していない。
  • Firefox 16 は -moz- が必要。古い構文(-moz-box)。標準構文で unprefixed は Firefox 18 か 19 っぽい。
    すみません、Firefox 18 で実装されるかどうかは分からないようです。syoichi さんのコメント を参照してください。
    Firefox 16 は display: -moz-box; が実装されていますが、現在のものとはかなり異なる構文なので注意が必要です。
  • Opera 12.10 から。標準構文。12.00 以下は Flexible Box に対応していない。
  • Chrome dev だと標準構文に -webit- つけたもの (-webkit-flex)。
    安定版でも大丈夫だそうです。
  • Safari 6 では実装されていないようだ。

font-feature-settings プロパティ

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

calc() 関数

  • IE9 から。
  • Firefox 16 から。
  • Opera は未対応。
  • Chrome, Safari は -webkit- が必要。

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

Comments

syoichi

CSS Flexible Boxについて、
Firefox 16ではまだ利用できません。現在のところ、Firefox 18以降でabout:configからlayout.css.flexbox.enabledをtrueに設定することで利用できるようになりますが、まだ幾つかのプロパティーは実装されていないようです。
http://myakura.hatenablog.com/entry/2012/10/01/003413

また、Chromeは既にstableで利用できるようになっています。

まとり

@syoichi さん

かなり前の仕様である display: -moz-box は動いているので一応書いておきましたが、混乱しそうなので削除しました。
Firefox 18 以降の話も追記しました。

Chrome についても安定版を追記しました。

どうもありがとうございました。

syoichi

古い構文への注意が足りずすみませんでした…。古い構文も考慮すると「Firefox 16ではまだ利用できません」というのはあまり正確ではありませんね…。Flexible BoxからBox Alignment(http://dev.w3.org/csswg/css3-align/ )への一部分離などで仕様も構文もかなり変わっている事で誤解してしまっていたようです。

まとり

@syoichi さん

いえ、お気になさらずに。
実際にかなり変わってしまっている上、将来的にはなくなるものでしょうし。

今回はどうもありがとうございました。

Leave a Reply