[CSS3] IE10の一般公開を受けてFlexible Boxの仕様を比較するサンプル書いた

IE10が出たそうで。

さっそくインストールしたらしい人柱をTLで目撃。きになる。

スマホにまみれた生活なのでプレビュー版から華麗にスルーしています。
インストールももちろんしてないので丁重にお願いしてみた。

おやおや…

jsdo.itのWorksはフレキシブルボックス(display:box)を使ってる。(とこれで知った)

マッハで書いたテストがこちらになります。

※上:display:box 下:display:flex

ぐぐったらIE10のフレキシブルボックスについて記事書いてる方がいたので、
仕様見ながら追加してみたら…

IE10…

※上:display:box 中:display:flex 下:display:flexbox

IE10用に書いたソースはこれ

display: -ms-flexbox;
-ms-flex-direction:row;//initial
-ms-flex-align:center;
-ms-flex-pack:justify;

2011年の春頃に仕様見た時にこのdisplay:flexboxとかflex-alignっていうのになってたっていう記事を書いた覚えがあります。
Internet Explorer 10 での flexbox の実装は、2012 年 3 月 22 日版の「Flexbox」草案に基づいています。だそうで、flex-orderの初期値は0である以外はdisplay:flexboxの頃のものである。

えーと、つまり

display:box(WebKit・Firefox) → display:flexbox(IE10) → display:flex(←今ここ/Opera12.1・Webkit)

ということですね!

Webkit様の対応ぶりには恐れ入ります。

Compass v0.12.2の場合

CSS3モジュールのmixinを使用するとdisplay:boxの仕様でプレフィックスつきのものが出力されます。
なのでさらにmixinを上書きして対応するか、諦めてCompassが対応するのを待つことになります。

まとめ

IE10は犠牲になったのだ…

スマホサイトの場合

display:box
端末が対応し始めてきたらdisplay:flexに移行

PCサイトの場合

display:box+IE10だけdisplay:flexbox
display:box+display:flex+IE10だけdisplay:flexbox

1件のコメント

Leave a Comment.