カテゴリー

キーワード

 
> FlexboxのIE10、Safari、iOS ...

FlexboxのIE10、Safari、iOS Safariへの対応【総論】


2015 年 4 月 24 日 投稿    view: 24936
タグ:
このエントリーをはてなブックマークに追加

css Flexbox ブラウザ対応総論

こんにちは、WEBマーケティング部の杉尾です。


前回まで三回にわたって、Flexboxのプロパティを紹介しました。


今回は『FlexboxのIE10、Safari、iOS Safari、Androidブラウザへの対応【総論】』です。


前回までの記事と併せてお読みいただくと理解が深まると思います。


Flexboxプロパティ紹介第一回はコチラ
⇒【CSS】Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します

Flexboxプロパティ紹介第二回はコチラ
⇒【CSS】Flexboxのプロパティ(flex-grow、flex-shrink、flex-basis、flex)を紹介します

Flexboxプロパティ紹介第三回はコチラ
⇒【CSS】Flexboxのプロパティ(justify-content、align-items、align-self、align-content)を紹介します


Flexboxについて


Flexboxとは

Flexboxとは、『フレキシブルボックスレイアウトモジュール(Flexible Box Layout Module)』のことです。


CSS3で新たに採用されたモジュール(機能の一群)で、要素をFlexコンテナというボックス内に整列させる新しい方法です。


過去に二度大きな仕様変更があったことに加え、各主要ブラウザへの対応がまちまちであったせいで、これまで扱いづらいものでした。
しかし、今現在では主要ブラウザの最新バージョンが(一部ベンダープレフィックス付きであるものの)対応しましたので、これからは使いやすくなるはずです。


各主要ブラウザとは、IE、Chrome、Firefox、Safari、Operaのことです。


Flexboxの各主要ブラウザの最新バージョン対応状況

現在、各主要ブラウザの最新バージョンにおけるFlexbox対応状況はこちらです。


Flexbox主要ブラウザ対応状況


IEは9以下が未対応です。

(※IE9の国内ブラウザシェアは2015年1~3月期で、3.66%です。案件によっては対応しないことも視野に入れていいと思います


PC、iOSのSafariでベンダープレフィックスが必要ですが、それ以外は対応済みです。


各ブラウザへの対応策


Safari(PC、iOS)最新バージョンへの対応

PCのsafariとiOSのSafariでベンダープレフィックスが必要です。


ベンダープレフィックスについてはこちらをどうぞ
【CSS3】 ベンダープレフィックスとは? (プロパティによっては不要)


『-webkit-』で対応できますので、それぞれのプロパティの上に書いてください。


記述例

.foo {
    -webkit-flex-direction:row-reverse;
}

IE10への対応

前回までの記事では、各プロパティを紹介するのにIE10への対応を無視しました。
それはなぜかというと、IE10は書き方が異なるからです。


前項でFlexboxは過去に二度大きな仕様変更があったと説明しましたが、各主要ブラウザの中でIE10だけが一度目の仕様変更に対応したからです。
下の表をご覧ください。


  box flexbox flex
IE 10(-ms-) 10(-ms-) 11~
Chrome 4~(-webkit-) - 21~(21~28:-webkit-)
Firefox 2~(-ms-) - 22~
Safari 3.1~(-webkit-) - 6.1~(-webkit-)
Opera - - 12.1~(15:-webkit-)
ios Safari 3.2~(-webkit-) - 7~(-webkit-)
Android 2.1~(-webkit-) - 4.4~

ご覧の通り、IE10だけが【flexbox】という仕様にベンダープレフィックス付きで対応しています。


対応するには【flexbox】仕様で記述し、各プロパティの値に『-ms-』を付けてください。
そして【flexbox】仕様はプロパティの書き方が現行の【flex】仕様とは違う点がいくつかあります。


記述例

.foo {
   -ms-flex-direction:row ;
}

iOS Safari6.1以前、Androidブラウザの4.3以前への対応

こちらはFlexboxの最も古い仕様での対応になります。
Androidブラウザの4.3以前のスマホブラウザでのシェア率は下がってきていると思いますが、
まだ無視できるほどではありませんので、スマホ対応を考えている場合はこれをお使いください。
(iOS Safari6.1以前を使っている人はあまりいないと思いますが、念のため)


『box』という仕様にベンダープレフィックスをつけて書きます。


記述例

.foo {
   -webkit-box-direction:reverse;
}

まとめ

レスポンシブデザインで、IE10とスマホに、同時対応させるという案件があるかもしれませんので知っておいて損はありません。
とはいえ、今後、Androidブラウザ4.3以前のシェアは減っていくでしょうから、需要は少なくなると思います。


次回は『FlexboxのIE10、Safari、iOS Safari、Androidブラウザへの対応【実践編】』と題して、具体的なコードを紹介します。


最後までお読みいただき、ありがとうございました。



併せてこちらもどうぞ。


Flexboxプロパティ紹介第一回はコチラ
⇒【CSS】Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します

Flexboxプロパティ紹介第二回はコチラ
⇒【CSS】Flexboxのプロパティ(flex-grow、flex-shrink、flex-basis、flex)を紹介します

Flexboxプロパティ紹介第三回はコチラ
⇒【CSS】Flexboxのプロパティ(justify-content、align-items、align-self、align-content)を紹介します

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事