古いブラウザで表を表示するためのflexboxフォールバック

Question

フレックスボックスをサポートしていないブラウザのみをターゲットにするためには、以下の方法よりも良い方法がありますか？私はこれがうまくいくと思いますが、例えば、現代のブラウザにも影響するかもしれない例えばie8や9のスタイルしか必要としないかもしれません。別のスタイルシートを作成するのが最善でしょうか？

.flex{ 
    display:table; 
    display:flex; 

    .column{ 
    display:table-cell; 
    display: inline-block; 
    } 
} 

ありがとうございます！

Answer 1

長い答えは複雑です。良いことは、IE10と今日使用されているほとんどの古いブラウザがフレックスボックスをサポートしていることです。しかし、かなり異なる仕様と動作を持つ古い構文です。 flexbox supportテーブルを参照してください。また、あなたは外観を持っているか、またはこのtoolをレガシーフレックスボックススタイルを生成するチェックボックスを有効にして使用することをお勧めします。それはあなたにかなり互換性のあるCSS文法を使用することになります。

古いブラウザとの互換性が気になる場合は、display:flex;だけをおすすめします。それらの古いフレックスボックスプレフィックスを追加する必要があります。 IE8と9に関しては、必要ならばIE8デスクトップブラウザをターゲットにしたテーブルフォールバックを使用することができます。これは、次のルールセットに来る：新旧フレキシボックス仕様とsupport間の主な機能の違いはflex-wrapの欠如であることに注目し

.flex-container { 
    display: table;  /* IE < 10, Opera *Presto* Desktop (Now dead) */ 
    display: -webkit-box; /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */ 
    display: -moz-box;  /* Firefox 2 - 27 (2009 Spec), UCMini Android */ 
    display: -ms-flexbox; /* IE10 (2012 Syntax) */ 
    display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */ 
    display: flex;   /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */ 
} 

。だから、多くの["フレックスバグ"]（https://github.com/philipwalton/flexbugs）との違いを見守るべきです。 はを使用できません。2012年のブラウザまたはIE9以降の広範な後方互換性を望む場合は、flex-wrapを使用してください。

*ターゲットユーザーがアジアまたはアフリカにいる場合は、現在のところ新しい構文をサポートしていないAndroid用UCBrowserのモデルが間違いなく必要です。 （2016年時点で、UCBrowserは世界中で10％以上のモバイルブラウザを使用しており、アジアでは25％を使用しています）。おそらく古くなったFirefoxに基づいたUCMiniにも、-moz-boxが必要です（使用データと場所は一般に不明です）。

フレックスアイテムについてtable-cellまたはtable-rowフォールバック。特にフレックスボックスネストでは、やりにくくなります。

ただし、利用できる3つのオプションがあります。

1）Modernizrのようなスクリプトを使って特徴検出を使用しますが。 Modernizr CSSドキュメントスタイリングを使用して、JS機能の検出を通じてIE8-9フォールバックルールを宣言します。

html.no-flexbox .flex-item { 
    display: table-cell; 
} 

2）使用IE CSS条件付きスタイリング：このよう

<!--[if lte IE 9]> 
    <link rel="stylesheet" type="text/css" href="ie-8-9-fallbacks.css" /> 
<![endif]--> 

OR

3）他のノーJSの方法はCSS hacksを使用しています。表示値は他のブラウザでは無視され、IE8-9によってのみ解析され、適用されます。A）

.flex-item { 
    display: block; 
    display: table-cell\0/; /*IE8-10 */ 
} 

および/または：で

B）

@media \0screen\,screen\9 { /* IE6-10 and exclude FF2 */ 
    .flex-item { display: table-cell; } 
}