Firefox 22.0 でのレイアウト調整

APPW.jp サイトのレイアウトデザインは、Android や iOS の標準ブラウザをメインターゲットとしながら、他のブラウザへの対応を段階的に行ってきています。 Firefox について、前回は「Firefox 1 […]

APPW.jp サイトのレイアウトデザインは、Android や iOS の標準ブラウザをメインターゲットとしながら、他のブラウザへの対応を段階的に行ってきています。

Firefox について、前回は「Firefox 19.0 でのレイアウト調整」というような形で確認を行ないました。

Firefox 22 の正式リリースがはじまります。

Firefox 開発者向けリリースノート Firefox 22 for developers において「CSS Flexbox layout をデフォルトで有効にしました」と公開されています。

なお、MDN Web technology for developers CSS Flexible Box の利用 のドキュメントの注記では「Firefox は水平方向の flexbox のみをサポートしています」としています。

この投稿時点で MDN CSS Reference flex-wrap によると、Firefox では、flex-wrap を未サポートとあります。

今回は、これらについて対応を検討していました。

APPW.jp サイトのレイアウトデザインについて、flexbox に対応するブラウザには flexbox によるレイアウト、非対応のブラウザには inline block によるレイアウトが適用されるように、CSS 記述順による適用というシンプルな方法を利用してきていました。

水平方向の flexbox のみサポートの Firefox 22 にむけて、flexbox が適用されないようにする方法をとることにしました。実際に採った方法です。

.contentsWrapper {

  display: block ;

  display: -webkit-box ;
  -webkit-box-pack: center ;

  display: -ms-flexbox ;
  -ms-flex-direction: row ;
  -ms-flex-align: start ;
  -ms-flex-pack: center ;
  -ms-flex-wrap: wrap ;

  display: -webkit-flex ;
/*  -webkit-flex-direction: row ; */
/*  -webkit-flex-wrap: wrap ;     */
  -webkit-flex-flow: row wrap ;

  -webkit-justify-content: center ;
  -webkit-align-items: flex-start ;
  -webkit-align-content: flex-start ;

  display: flex ;
/*  flex-direction: row ; */
/*  flex-wrap: wrap ;     */
  flex-flow: row wrap ;

  justify-content: center ;
  align-items: flex-start ;
  align-content: flex-start ;
}

@-moz-document url-prefix( ) {
  .contentsWrapper {
    display: block;
  }
}

Google 検索で、多くの記事を参考にさせて頂きました。

今後、Firefox において、flexbox の適用方法が難しくなってきたと感じます。

追記。「 Firefox 28.0 より multi-line flexbox サポート 」