ブラウザがIE 11またはEdgeの場合、CSSで検出するにはどうすればよいですか？

Question

グリッドレイアウトを使用しようとしていますが、IE 11とEdge（15以下）はグリッドの現在の実装をサポートしていません。私はあなたがフレックスボックスを使用している秋のバックデザイン（通常はあなたのモバイルレイアウト）を持っている必要があります読んでいた。私は本当にIE未満は何も気にしないでください

11.私は@supports not (display: grid)を使用し、そのブロック内の私のフレキシボックスのコードを貼り付け、これはエッジのために働くだろうが、IE 11は@supportをサポートしていないことを知って

タグ。

私は@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)

を使用することができますが、私は二度私のフレキシボックスのCSSコードを複製しなければならないので、これはエッジでは動作しませんIE 11のために読んでください。 @mediaチェックに1回、@supportに1回チェックします。

可能であれば、小切手を1つにマージしたいと思います。

例：

/* use this for anything that supports grid layout */ 
@supports (display: grid){ 
    .container { 
     display: grid; 
    } 

} 

/* need to wrap this around with something that will only render on IE 11 or Edge 15 and below */ 
.container { 
    display: flex; 
} 

Answer 1

ここでは、具体的IE10、11およびエッジ< 16グリッドの実装は両方IEとGridサポートしているブラウザを処理する方法であるがあります：

あなたのグリッドでは、セットアップに必要MSグリッドと新グリッドの両方：

.my-grid { 
    display: -ms-grid; 
    display: grid; 
    -ms-grid-rows: 500px auto auto; 
    grid-template-rows: 500px auto auto; 
    -ms-grid-columns: 1fr 400px; 
    grid-template-columns: 1fr 400px; 
} 

次にあなたが-ms vendoを使用する必要がありますあなたのセクションのそれぞれのプレフィックスと、通常のプレフィックスのないプレフィックスを含みます。基本的には、2つのグリッドを実装します。あなたが述べたように、あなただけIEにフレックス使用したい場合：

.my-grid { 
    display: flex; 
    display: grid; 
    grid-template-rows: 500px auto auto; 
    grid-template-columns: 1fr 400px; 
    /* since IE doesn't support display: grid; the last two lines won't matter */ 
} 

私の推薦は次のとおりです。

1. モバイル最初にすべての主要なブラウザでサポートされている新しいグリッドのためのフレックス
2. グリッドを使用して
3. MSグリッド（新しいグリッドの溝をサポートしていません）

NOTES：マイクロソフトは最初のグリッド実装を行いました。その後、他のブラウザは仕様を変更し、数年後に独自の実装を行いました。 IE Edge 16の新しい仕様にマッチするには数年かかりました。そのため、MSグリッド実装とグリッド1があります。