Flexboxでのクロスブラウザ対応

Flexboxは、仕様策定の過程で様々な記法が存在しました。例えば、Android 4.3以下やIE 10にも対応するには、ベンダープレフィックスや異なる値を用いて次のように記述する必要があります。

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

同様に、主軸方向の並び方justify-content、垂直軸方向の並び方align-items等についても記法に違いがあります。Flexboxを使うために異なる記法を都度記述するのは手間で、バグを誘発します。この問題は他のCSS3プロパティを使う場合にも同じです。こういったベンダープレフィックスの有無、記法の差異を吸収する際は、「Autoprefixer」というツールを使うのがお薦めです

Autoprefixerオートプレフィキサーを使ってクロスブラウザ対応する

Autoprefixerは、CSSコードを解釈し、必要なベンダープレフィックスを自動で設定したり、異なる記法を出力するなどして、指定のブラウザ向けに必要な出力を行うツールです。

160822_flexbox_autoprefixer

具体的にはGulpのようなタスクランナーと併せて用いるのがよいでしょう。

簡易な手順でAutoprefixerを使う方法

今回は、いくつかの設定をするだけでAutoprefixerを使えるタスクを作成しました。Flexboxを使う場合だけでなく、CSS3グラデーションのベンダープレフィックス対応といった他CSSプロパティの記述差異吸収においても利用可能です。5つのステップで手軽に利用できるので、ぜひご利用ください。

① GitHubよりpackage.jsongulpfile.jsをダウンロードし、プロジェクトフォルダ直下に配置します。
② Node.jsが必要なので、インストールしていない場合は公式サイトからインストールしてください。
③ コマンドラインより、下記コマンドを実行します。

npm install

④ 完了したらgulpfile.jsの次の変数に必要な値を記述します。

// 変換したいCSSファイルのパス
var cssFile = "src/css/style.css";
// 変換後のCSSファイルを保存するパス
var cssDistPath = "src/css/";
// 変換後のCSSファイルの名前
var cssDistFile = "style_dist.css";

⑤ コマンドラインで下記コマンドを実行します。

npm run gulp

Flexboxのレイアウト部分のCSSコードが次のように出力され、Flexboxのクロスブラウザ対応ができました。

▼ 変換前のコード(抜粋)

hedear {
  display: flex;
  justify-content: space-between;
}

▼ 変換後のコード(抜粋)

hedear {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

より詳しくGulpやAutoprefixerについて知りたい方は、下記記事を参照ください。

ここまでのCSSコードとデモは下記です。

Flexbox未対応のブラウザ向けの対応方法(IE 9)

Flexboxに対応しているブラウザの対応はできましたが、未対応のブラウザの対応はどうすればよいのでしょうか? Flexboxは、執筆時点(2016/08/22)ではほぼ全てのモダンブラウザで対応しています(「Can I use」より)。しかし、IE 9のようなFlexboxに未対応のブラウザへの対応を余儀なくされるケースもあるでしょう。このような場合にはポリフィルを用います。

ポリフィル「flexibility.js」でIE 9でもFlexboxレイアウト

ポリフィルとは、最新のブラウザの機能を古いブラウザでも利用可能にする技術です。Flexboxのポリフィルの一つとして「flexibility.js」があります。Flexboxに対応していないIE 9等のブラウザでもFlexboxが有効になります。

HTMLコードでflexibility.jsを読み込みます。なお、執筆時点(2016/08/22)の最新版 2.0.1ではIE 9で動作しないバグがあるため、1系を用います。

<script src="https://cdnjs.cloudflare.com/ajax/libs/flexibility/1.0.6/flexibility.js"></script>

CSSコードのdisplay:flex;を指定している箇所で、-js-display : flex;を指定します。justify-contentflex-wrapのようなプロパティに各々-js-をつける必要はありません。

header {
  -js-display : flex;
  display : flex;
}

ul {
  -js-display : flex;
  display : flex;
}

main {
  -js-display : flex;
  display : flex;
}

ポリフィルを読み込むことで、IE 9でもFlexboxのレイアウトが適用されます。

160822_flexbox_polyfill

完成版のCSSコードとデモは下記です。

Flexboxはボックスレイアウトの新常識

floatに代わるCSS3のボックスレイアウト手法であるFlexboxは、並び方、折り返し設定、並び方向の設定等、シンプルな記述で豊富なレイアウトが可能です。Autoprefixerやポリフィルと連携することで、多くのブラウザに対応できます。是非この機会にFlexboxによるボックスレイアウトを始めましょう。