最近Flexbox使いまくりです。便利ですよね。特にレスポンシブでは大人の事情をかますことなくワンソースで見事にレイアウトを再現してくれます。
EI9や8にも対応してくるflexibility.js
僕は個人的にはFlexboxはデスクトップでは使わず、モバイルの時に使います。ブラウザの対応状況とか考えるとその方が安全だと考えたからです。
しかし！flexibility.jsってjsを使えばIE9やIE8に対応するというじゃありませんか！
これで、デスクトップの時も気にせずFlexboxつかってやるぜ！って思ったのも束の間、効いてない・・・・
SVGが原因でflexibility.jsが効かなかった
読み込まれているjsを全て削除しても効かなくて、何が原因なんだ〜と悶えながらSVGの読み込みを削除すると効きました。
色んなケースでの検証はまだなので、SVGが絶対無理とは言えませんが、当ブログではSVGの読み込みが原因で、flexibility.jsが効いてなかったぽいです。
そもそも当ブログはIEに完全対応しているわけではありませんので、問題はありませんが、案件単位で考えるとIE8はともかくIE9はまだ対応必要だと思われるので、原因を知っておきたかったわけです。
ついでにその他の問題点
インライン要素、幅をもたないテキストなどが想定外の箇所で改行される現象がしばしばありました。それでも他のCSSの書き方をするよりFlexboxをつかった方が楽なので、インライン要素に注意しておけば、大丈夫だと思われます。
ついでに使い方
条件付きコメントでなんかでjsファイル本体を読み込んでおいて
<!--[if lte IE 9]> <script src="js/flexibility.js"></script> <![endif]-->
ディスプレイの指定に-js-display: flexを追記するだけです。
.fl-container{
-js-display: flex;
display:-webkit-box;
display: -webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display: flex;
}
まとめ
とりあえずSVGとインライン要素に気をつけて使えばすごく便利なjsです。言ってる間にMicrosoftのIE9サポートも終わるので、末長く使うことはないかもしれませんが、その間どれだけ助かるんだ！と思えば作者さんに感謝せざるをえません。
ちなみ新しいバージョンのIEのF12では検証できません。実機やMicrosoftが提供してくれている、ヴァーチャル環境が必要です。
