Q&A
ご回答ありがとうございます。
なるほど、確かに対応ブラウザは懸念点の１つですね。
ちょうどPC向けのサイトに適用を考えていたのでスマホ向けは気づいてませんでした汗
最近、CSSのFlexboxを使用するようになりました。
Flexboxが便利すぎて、ほとんどのレイアウトがFlexboxを用いて実現出来てしまいますが、Flexboxを多用することに関して何か懸念点はありますでしょうか？（速度面や可読性、また従来のFloat、positionでのレイアウトからFlexboxに変更する際の落とし穴、Flexboxでレスポンシブ対応を行う際の懸念点、等々）
回答2件
0
既に解決済みですが、補足します。
まず、flexbox非対応なのはIE9以下です。
従ってIE9以下の環境では、原則使えません。
flexboxを多用した場合の最も大きな懸念点は、**IE9以下の環境で閲覧された場合、
何の対処もしていないと「大幅にレイアウトが崩れる」**ということです。
受託案件とかの場合、「サポート外環境でも情報の読み取りに支障が生じるような大幅なレイアウト崩れは無いようにお願いします」みたいな感じで言われることはあり得ますので、そうなった場合に制作・運用の負荷が跳ね上がることが予想されます。。。
なので、現状使うのであればIE9以下は「大幅に崩れることがありますが完全無視」を貫くのでなければ
対応に手間がかかるものと思われます。
IE9以下へのサポート方法としては、
・フォールバックとしてfloatで出来る範囲のレイアウトを入れておく
・polyfillスクリプトを探してきて動作チェックする
などが考えられます。
次に問題となるのが、最新の標準仕様に準拠していない環境の存在です。
こちらは、Android4.4以前の標準ブラウザ環境と、IE10です。
これらにもflexboxを対応させるためには、標準仕様とは異なる古い仕様の記述を追記する必要があります。
厄介なことにこれらの環境は標準仕様とは根本的に記述が全く異なります。
その上Android4.4以前の-webkit-と、IE10用の-ms-も、それぞれ仕様が異なります。
これらを手動で正しく記述することは、正直相当な困難を伴うことが予想されます。
ちなみに古い-webkit-と-ms-にも対応し、最大限サポート対象を広げた形で記述したflexboxの記述がこちらになります。
CSS
1.flex-box { 2 display: -webkit-box; 3 display: -webkit-flex; 4 display: -ms-flexbox; 5 display: flex; 6 -webkit-flex-wrap: wrap; 7 -ms-flex-wrap: wrap; 8 flex-wrap: wrap; 9 -webkit-box-pack: justify; 10 -webkit-justify-content: space-between; 11 -ms-flex-pack: justify; 12 justify-content: space-between; 13 } 14} 15 16.flex-item { 17 -webkit-flex-basis: 47%; 18 -ms-flex-preferred-size: 47%; 19 flex-basis: 47%; 20}
こちらは一例ですが、旧仕様は単にプレフィックスをつければ良いというものではなく、
プロパティ名や値そのものが全く異なるうえ、サポートしている機能そのものにも違いがあります。
YutaKoshimizuさんがおっしゃっている「スマホに対しては別のCSSを適用するとかでしたらじゃんじゃん使って大丈夫」というのはこういうことだと思います。
旧仕様についてはまとまった日本語の情報がほとんどない状況ですので、
それを全て完璧に把握して手動で記述するのはかなりの困難を伴うことが予想されます。
従って、旧仕様をサポートしながらじゃんじゃん使いたいなら、「Autoprefixer」を活用することをお勧めします。
先ほどのコードも、Autoprefixerを使って自動的に記述したものになります。
標準仕様を理解する環境のみをサポートする案件であれば現状flexboxはもうじゃんじゃん使って
大丈夫だと思われますが、そうでない環境に配慮しようと思うと途端にやることが増えるのが現実ですので、
その辺りを考慮した上で対応されるのがよろしいかと思います。
参考までに。
投稿2016/06/27 04:56
総合スコア3763
0
ベストアンサー
スマホだと結構対応していないブラウザが出回っています。
（例えばAndroid4.4以前の標準ブラウザとかIE8とか）
数は減っていますが、Android4系のシェアは未だに多いですし、普段使うブラウザが標準ブラウザな人が
絶対いますので、使いドコロを気をつけないといけません。
ものすごい便利なんですけどね。
投稿2016/06/27 02:56
総合スコア830
スマホに対しては別のCSSを適用するとかでしたらじゃんじゃん使って大丈夫だと思いますよ。
ただやはりIE8がいますので、Vistaがサポート終了するまではずっとついてまわる問題かと。
> じゃんじゃん使って大丈夫
ありがとうございます！
IEは・・・対応するときが来れば考えます・・・
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/27 05:04
2016/06/27 05:05
2016/06/27 05:05
2016/06/27 05:07
2016/06/27 07:22