使用CSS功能/特征检测检测IE11

Question

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

为了检测IE10,我使用JavaScript和功能测试技术来检测某些带ms前缀的样式,例如msTouchAction和msWrapFlow.

我想对IE11做同样的事情,但我假设所有的IE10样式也将在IE11中得到支持.任何人都可以帮我识别IE11中唯一可以用来分辨两者的风格或功能吗？

额外信息

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

我也在使用Modernizr,但在这里没有用.我需要帮助解决我明确提出的问题.

Answer 1

根据不断发展的主题,我更新了以下内容:

IE 6

* html .ie6 {property:value;}

要么

.ie6 { _property:value;}

IE 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;}
}

IE 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.

IE 11

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

Javascript替代品

Modernizr的

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

用户代理选择

使用Javascript:

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;
}

脚注

如果可能,请确定并修复任何问题,而不是黑客攻击.支持渐进增强和优雅降级.然而,这是一个并非总能获得的"理想世界"场景,因此 - 上述应该有助于提供一些好的选择.

归因/基本阅读

• 杰夫克莱顿 | Browserhacks.com
• 凯斯克拉克
• 保罗爱尔兰
• Web Devout
• 扳手

Answer 2

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

在搜索完Microsoft文档后,我设法找到了一种新的IE11样式msTextCombineHorizontal

在我的测试中,我检查IE10样式,如果它们是正面匹配,那么我检查IE11的样式.如果我找到它,那么它是IE11 +,如果我没有,那么它是IE10.

代码示例: 通过CSS功能测试检测IE10和IE11(JSFiddle)

 /**
  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.

我正在使用此测试进行回退行为.后备行为只是不那么迷人的样式,它没有减少功能.

Answer 3

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* add your IE10-IE11 css here */   
}

添加所有类或CSS属性.

Answer 4

这似乎有效:

@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/

Answer 5

这是2017年的答案，您可能只在乎区分<= IE11和> IE11（“ Edge”）：

@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，所有其他相关的浏览器/版本组合都支持。

Answer 6

您可以正常编写IE11代码,然后使用@supports并检查IE11中不支持的属性grid-area: auto.

然后,您可以在其中编写现代浏览器样式.IE不支持该@supports规则并将使用原始样式,而这些将在支持的现代浏览器中被覆盖@supports.

.my-class {
// IE the background will be red
background: red;

   // Modern browsers the background will be blue
    @supports (grid-area: auto) {
      background: blue;
    }
}