internet-explorer-11 - CSS Capability/Feature Detection を使用した IE11 の検出

Question

IE10+ は、ブラウザーを識別するためのブラウザー検出タグをサポートしなくなりました。

IE10 を検出するために、私は JavaScript を使用しており、特定のmsプレフィックス付きスタイルを検出する機能テスト手法が定義されmsTouchActionていmsWrapFlowます。

IE11 でも同じことをしたいのですが、すべての IE10 スタイルが IE11 でもサポートされると想定しています。2つを区別するために使用できるIE11のみのスタイルまたは機能を特定するのを手伝ってくれる人はいますか?

追加情報

ユーザーエージェントタイプの検出はむらがあり、変更できるため、使用したくありません。また、IE11 が Internet Explorer であるという事実を意図的に隠そうとしていることを読んだと思います。
IE10 の機能テストがどのように機能するかの例として、このJsFiddle (私のものではありません) をテストの基礎として使用しました。
また、「これはやばい…」という回答もたくさん期待しています。これに対する私のニーズの 1 つは、IE10 が何かをサポートしていると主張しているが、実装が非常に悪いことです。IE10 と IE11+ を区別できるようにして、将来的に機能ベースの検出方法に移行できるようにしたいと考えています。
このテストは、一部の機能を魅力的でない動作に "フォールバック" するだけの Modernizr テストと組み合わされています。重要な機能について話しているのではありません。

また、私はすでに Modernizr を使用していますが、ここでは役に立ちません。明確に尋ねられた質問の解決策を教えてください。

score 24 · Accepted Answer

そのため、最終的にこの問題に対する独自の解決策を見つけました。

Microsoftのドキュメントを検索した後、新しいIE11のみのスタイルを見つけることができましたmsTextCombineHorizontal

私のテストでは、IE10 スタイルをチェックし、それらが肯定的に一致する場合は、IE11 のみのスタイルをチェックします。見つかった場合は IE11+、見つからない場合は IE10 です。

コード例: CSS 機能テスト (JSFiddle) による IE10 および IE11 の検出

 /**
  Target IE 10 with JavaScript and CSS property detection.
  
  # 2013 by Tim Pietrusky
  # timpietrusky.com
 **/

 // IE 10 only CSS properties
 var ie10Styles = [
     'msTouchAction',
     'msWrapFlow',
     'msWrapMargin',
     'msWrapThrough',
     'msOverflowStyle',
     'msScrollChaining',
     'msScrollLimit',
     'msScrollLimitXMin',
     'msScrollLimitYMin',
     'msScrollLimitXMax',
     'msScrollLimitYMax',
     'msScrollRails',
     'msScrollSnapPointsX',
     'msScrollSnapPointsY',
     'msScrollSnapType',
     'msScrollSnapX',
     'msScrollSnapY',
     'msScrollTranslation',
     'msFlexbox',
     'msFlex',
     'msFlexOrder'];

 var ie11Styles = [
     'msTextCombineHorizontal'];

 /*
  * Test all IE only CSS properties
  */
 var d = document;
 var b = d.body;
 var s = b.style;
 var ieVersion = null;
 var property;

 // Test IE10 properties
 for (var i = 0; i < ie10Styles.length; i++) {
     property = ie10Styles[i];

     if (s[property] != undefined) {
         ieVersion = "ie10";
         createEl("IE10 style found: " + property);
     }
 }

 // Test IE11 properties
 for (var i = 0; i < ie11Styles.length; i++) {
     property = ie11Styles[i];

     if (s[property] != undefined) {
         ieVersion = "ie11";
         createEl("IE11 style found: " + property);
     }
 }

 if (ieVersion) {
     b.className = ieVersion;
     $('#versionId').html('Version: ' + ieVersion);
 } else {
     createEl('Not IE10 or 11.');
 }

 /*
  * Just a little helper to create a DOM element
  */
 function createEl(content) {
     el = d.createElement('div');
     el.innerHTML = content;
     b.appendChild(el);
 }

 /*
  * List of IE CSS stuff:
  * http://msdn.microsoft.com/en-us/library/ie/hh869403(v=vs.85).aspx
  */

body {
    font: 1.25em sans-serif;
}
div {
    background: red;
    color:#fff;
    padding: 1em;
}
.ie10 div {
    background: green;
    margin-bottom:.5em;
}
.ie11 div {
    background: purple;
    margin-bottom:.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Detect IE10 and IE11 by CSS Capability Testing</h1>


<h2 id="versionId"></h2>

それらを見つけたら、より多くのスタイルでコード例を更新します。

注: これにより、IE12 と IE13 はほぼ確実に「IE11」として識別されます。これらのスタイルはおそらく引き継がれるからです。新しいバージョンが展開されたら、さらにテストを追加し、Modernizr に再び依存できるようになることを願っています。

このテストをフォールバック動作に使用しています。フォールバックビヘイビアーは魅力的なスタイリングではなく、機能性が低下するわけではありません。

score 20 · Accepted Answer

これはうまくいくようです：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

https://www.limecanvas.com/css-hacks-for-targeting-ie-10-and-above/

score 13 · Accepted Answer

2017年以降の回答は次のとおりです。おそらく<= IE11と> IE11（「エッジ」）の区別のみに関心があります。

@supports not (old: ie) { /* code for not old IE here */ }

より具体的な例:

body:before { content: 'old ie'; }
/**/@supports not (old: ie) {
body:before { content: 'not old ie'; }
/**/}

これが機能するのは、IE11 が実際にはサポートしていないためです。他の関連するブラウザー@supportsとバージョンの組み合わせはすべてサポートしています。

score 4 · Accepted Answer

これを試して：

/*------Specific style for IE11---------*/
 _:-ms-fullscreen, :root 
 .legend 
{ 
  line-height: 1.5em;
  position: relative;
  top: -1.1em;   
}

score 3 · Accepted Answer

次のプロパティを使用します。

!!window.MSInputMethodContext
!!document.msFullscreenEnabled

score 2 · Accepted Answer

おそらく、Layout Engine v0.7.0 はあなたの状況に適したソリューションです。ブラウザの機能検出を使用しており、IE11 と IE10 だけでなく、IE9、IE8、および IE7 も検出できます。また、一部のモバイルブラウザーを含む、他の一般的なブラウザーも検出します。html タグにクラスを追加し、使いやすく、かなり詳細なテストで良好に動作します。

http://mattstow.com/layout-engine.html

score 2 · Accepted Answer

Modernizr を使用する必要があります。body タグにクラスが追加されます。

また：

function getIeVersion()
{
  var rv = -1;
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  else if (navigator.appName == 'Netscape')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

IE11 はまだプレビュー段階であり、ユーザーエージェントはリリース前に変更される可能性があることに注意してください。

現在、IE 11 のユーザーエージェント文字列は次のとおりです。

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko

つまり、バージョン 11.xx の場合、簡単にテストできます。

var isIE11 = !!navigator.userAgent.match(/Trident.*rv 11\./)

score 2 · Accepted Answer

Modernizrを使用している場合は、IE10 と IE11 を簡単に区別できます。

pointer-eventsIE10 はこのプロパティをサポートしていません。IE11はそうです。(カニウス)

ここで、Modernizr が挿入するクラスに基づいて、次の CSS を作成できます。

.class
{ 
   /* for IE11 */
}

.no-pointerevents .class
{ 
   /* for IE10 */
}

score 2 · Accepted Answer

IE11 の Gravity Form (WordPress) で同じ問題に遭遇しました。フォームの列スタイル「display: inline-grid」がレイアウトを壊しました。上記の回答を適用すると、不一致が解決されました!

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .gfmc-column { display: inline-block;} /* IE11 */
}

score 1 · Accepted Answer

一歩下がってください: 「私の Web サイトは X を実行する必要があります。このブラウザーはその機能をサポートしていますか? もしそうなら、良いブラウザーです。そうでない場合は、ユーザーに警告する必要があります」.

今していることを続けるのではなく、http://modernizr.com/にアクセスしてください。

internet-explorer-11 - CSS Capability/Feature Detection を使用した IE11 の検出

18 に答える 18

Related

Reference