使用CSS功能/功能检测来检测IE11 [英] Detecting IE11 using CSS Capability/Feature Detection

问题描述

IE10 +不再支持用于识别浏览器的浏览器检测标签.

IE10+ no longer supports browser detection tags to identify a browser.

我使用JavaScript来检测IE10，并且定义了一种功能测试技术来检测某些ms前缀样式，例如msTouchAction和msWrapFlow.

For detecting IE10 I am using JavaScript and a capability-testing technique to detect certain ms prefixed styles are defined such as msTouchAction and msWrapFlow.

我想对IE11做同样的事情，但是我假设IE11也将支持所有IE10样式.谁能帮助我确定我可以用来区分IE11的唯一样式或功能?

I want to do the same for IE11, but I am assuming that all the IE10 styles will be supported in IE11 as well. Can anyone help me identify IE11 only styles or capabilities that I could use to tell the two apart?

其他信息

• 我不想使用用户代理类型检测，因为它是如此的参差不齐，并且可以更改，而且我认为我已经读到IE11故意隐藏了它是Internet Explorer的事实.
• 有关IE10功能测试如何工作的示例，我使用了 JsFiddle (不是我的)作为我测试的基础.
• 我还期望有很多答案，这是个坏主意……".我对此的需求之一是IE10声称它支持某种功能，但是实现得很差，我希望能够区分IE10和IE11 +，以便将来继续使用基于功能的检测方法. /li>
• 该测试与Modernizr测试结合使用，该测试将使某些功能回退"到不那么迷人的行为.我们不是在谈论关键功能.

• I don't want to use User Agent type detection because it's so spotty, and can be changed, as well as I think I've read that IE11 is intentionally trying to hide the fact it's Internet Explorer.
• For an example of how the IE10 capability testing works, I used this JsFiddle (not mine) as a basis for my testing.
• Also I am expecting a lot of answers of "This is a bad idea...". One of my needs for this is that IE10 claims it supports something, but it is very badly implemented, and I want to be able to differentiate between IE10 and IE11+ so I can move on with a capability-based detection method in the future.
• This test is coupled with a Modernizr test that will simply make some functionality "fallback" to less glamorous behavior. We are not talking about critical functionality.

我还已经在使用Modernizr，但这里没有帮助.我需要帮助来解决我明确提出的问题.

推荐答案

所以最后我找到了解决该问题的解决方案.

So I found my own solution to this problem in the end.

搜索 Microsoft文档我设法找到一种新的仅IE11样式msTextCombineHorizontal

After searching through Microsoft documentation I managed to find a new IE11 only style msTextCombineHorizontal

在测试中，我检查了IE10样式，如果它们是正匹配项，则检查了仅IE11样式.如果找到它，那就是IE11 +，如果找不到，那就是IE10.

In my test, I check for IE10 styles and if they are a positive match, then I check for the IE11 only style. If I find it, then it's IE11+, if I don't, then it's 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.

NOTE: This will almost certainly identify IE12 and IE13 as "IE11", as those styles will probably carry forward. I will add further tests as new versions roll out, and hopefully be able to rely again on Modernizr.

我正在将此测试用于后备行为.后备行为只是样式上不那么吸引人，它并没有减少功能.

I'm using this test for fallback behavior. The fallback behavior is just less glamorous styling, it doesn't have reduced functionality.

这篇关于使用CSS功能/功能检测来检测IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！