スマートフォン・タブレットからインターネットサーバーオペレーション 2012~2015

APPW.jp 2012~2015

Firefox 22.0 でのレイアウト調整

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

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

image

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

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

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

wpid-Screenshot_2013-06-25-12-14-2001.png

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

wpid-Screenshot_2013-06-25-12-14-5501.png

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

image

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

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 サポート

SHA-1証明書からSHA-2証明書への移行で

HTTP/2 が標準化へ承認、HTTP は16年ぶりとなるバージョンアップ

SVG を jQuery Mobile Listview で

SVG を jQuery Mobile Swipe で

HTML5 は W3C Recommendation へ

Firefox 28.0 より multi-line flexbox サポート

ConoHa VPS のシステムリカバリを Mondo Rescue で

ConoHa VPS に VirtualBox と modern.IE の無償ツールをインストール

ConoHa VPS を iPad と Android で PC レスで

ConoHa VPS で IPv6 に対応しました