使用 CSS Capability/Feature Detection 检测 IE 版本

Question

IE10+ 不再支持浏览器检测标签来识别浏览器。

为了检测 IE10，我使用 JavaScript 和能力测试技术来检测某些 ms 定义的前缀样式，例如 msTouchAction 和 msWrapFlow 。

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

额外信息

• 我不想使用用户代理类型检测，因为它参差不齐，并且可以更改，而且我认为我已经读过 IE11 故意试图隐藏它是 Internet Explorer 的事实。
• 对于 IE10 功能测试如何工作的示例，我使用这个 JsFiddle （不是我的）作为我测试的基础。
• 我也期待很多“这是一个坏主意……”的答案。我对此的一个需求是 IE10 声称它支持某些东西，但它的实现非常糟糕，我希望能够区分 IE10 和 IE11+，以便将来继续使用基于能力的检测方法。
• 该测试与 Modernizr 测试相结合，该测试只会使某些功能“回退”到不那么迷人的行为。我们不是在谈论关键功能。

我已经在使用 Modernizr，但在这里没有帮助。

原文由 dano 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

所以我最终找到了自己解决这个问题的方法。

在搜索 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。

我正在将此测试用于回退行为。后备行为只是不那么迷人的样式，它没有减少功能。

原文由 dano 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

鉴于不断发展的线程，我更新了以下内容：

浏览器 6

 * html .ie6 {property:value;}

要么

.ie6 { _property:value;}

浏览器 7

 *+html .ie7 {property:value;}

要么

*:first-child+html .ie7 {property:value;}

IE 6 和 7

 @media screen\9 {
    .ie67 {property:value;}
}

要么

.ie67 { *property:value;}

要么

.ie67 { #property:value;}

IE 6、7 和 8

 @media \0screen\,screen\9 {
    .ie678 {property:value;}
}

浏览器 8

 html>/**/body .ie8 {property:value;}

要么

@media \0screen {
    .ie8 {property:value;}
}

仅 IE 8 标准模式

.ie8 { property /*\**/: value\9 }

IE 8,9 和 10

 @media screen\0 {
    .ie8910 {property:value;}
}

仅限 IE 9

 @media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 及以上

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

IE 9 和 10

 @media screen and (min-width:0) {
    .ie910{property:value;}
}

仅限 IE 10

 _:-ms-lang(x), .ie10 { property:value\9; }

IE 10及以上

_:-ms-lang(x), .ie10up { property:value; }

要么

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

使用 -ms-high-contrast 意味着 MS Edge 不会成为目标， 因为 Edge 不支持 -ms-high-contrast 。

浏览器 11

 _:-ms-fullscreen, :root .ie11up { property:value; }

---

Javascript 替代品

现代主义

Modernizr 在页面加载时快速运行以检测功能；然后它用结果创建一个 JavaScript 对象，并将类添加到 html 元素

用户代理选择

Java脚本：

 var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

添加（例如）以下内容到 html 元素：

 data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

允许非常有针对性的 CSS 选择器，例如：

 html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

---

脚注

如果可能，请在不使用 hack 的情况下识别并修复任何问题。支持 渐进增强 和 优雅降级。然而，这是一个“理想世界”场景，并非总能获得，因此，上述内容应该有助于提供一些不错的选择。

---

归因/基本阅读

• 杰夫·克莱顿 | Browserhacks.com
• 基思·克拉克
• 保罗爱尔兰人
• 网络虔诚
• 扳手

原文由 SW4 发布，翻译遵循 CC BY-SA 3.0 许可协议