CSS 기능 / 기능 감지를 사용하여 IE11 감지

IE10 +는 더 이상 브라우저를 식별하는 브라우저 감지 태그를 지원하지 않습니다.

IE10을 검출하기 위해 나는 어떤 감지 자바 스크립트와 기능 테스팅 기술을 사용하고 ms앞에 둔 스타일 등을 정의 msTouchAction하고 msWrapFlow.

IE11에서도 똑같이하고 싶지만 모든 IE10 스타일이 IE11에서도 지원 될 것이라고 가정하고 있습니다. 누구든지 내가 둘을 구분하는 데 사용할 수있는 IE11만의 스타일이나 기능을 식별하도록 도울 수 있습니까?

추가 정보

• 사용자 에이전트 유형 감지가 너무 불규칙하고 변경 될 수 있기 때문에 사용하고 싶지 않으며 IE11이 의도적으로 Internet Explorer라는 사실을 숨기려고한다는 것을 읽은 것 같습니다.
• IE10 기능 테스트가 어떻게 작동하는지에 대한 예를 들어,이 JsFiddle ( 내가 아닌)을 테스트의 기초로 사용했습니다.
• 또 "이건 나쁜 생각이야 ..."라는 답을 많이 기대하고 있어요. 이것에 대한 나의 요구 중 하나는 IE10이 무언가를 지원한다고 주장하지만 매우 잘못 구현되어 IE10과 IE11 +를 구별하여 향후 기능 기반 감지 방법으로 나아갈 수 있기를 바랍니다.
• 이 테스트는 일부 기능을 덜 매력적인 동작으로 "대체"하는 Modernizr 테스트와 결합됩니다. 우리는 중요한 기능에 대해 말하는 것이 아닙니다.

또한 이미 Modernizr를 사용하고 있지만 여기서는 도움이되지 않습니다. 명확하게 묻는 질문에 대한 해결책이 필요합니다.

진화하는 스레드에 비추어 아래 내용을 업데이트했습니다.

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한다는 것은 Edge가를 지원하지 않기-ms-high-contrast 때문에 MS Edge가 대상이되지 않음 을 의미합니다 .

IE 11

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

자바 스크립트 대안

모 더니 저

Modernizr는 페이지로드시 빠르게 실행되어 기능을 감지합니다. 그런 다음 결과로 JavaScript 객체를 만들고 html 요소에 클래스를 추가합니다.

사용자 에이전트 선택

자바 스크립트 :

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

각주

가능한 경우 해킹없이 문제를 식별하고 수정합니다. 점진적 향상 및 정상적인 성능 저하를 지원합니다 . 그러나 이것은 '이상적인 세계'시나리오이므로 항상 얻을 수있는 것은 아닙니다. 위의 내용은 좋은 옵션을 제공하는 데 도움이 될 것입니다.

기여 / 필수 독서

• Jeff Clayton | Browserhacks.com
• 키스 클라크
• 폴 아이리쉬
• 웹 Devout
• 스패너

IE10 및 IE11 만 대상 (Edge 제외) :

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

그래서 결국이 문제에 대한 나만의 해결책을 찾았습니다.

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에 다시 의존 할 수 있기를 바랍니다.

이 테스트를 대체 동작에 사용하고 있습니다. 대체 동작은 덜 매력적인 스타일이며 기능이 저하되지 않습니다.

이것은 작동하는 것 같습니다.

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

IE11 코드를 정상적으로 작성한 다음 IE11 @supports에서 지원되지 않는 속성 (예 :) 을 사용 하고 확인할 수 있습니다 grid-area: auto.

그런 다음 여기에 최신 브라우저 스타일을 작성할 수 있습니다. IE는 @supports규칙을 지원하지 않으며 원래 스타일을 사용하지만 .NET을 지원하는 최신 브라우저에서는 이러한 스타일이 재정의됩니다 @supports.

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

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

다음은 <= IE11과> IE11 ( "Edge")을 구분하는 데만 관심이있는 2017 년의 답변입니다.

@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, 그리고 다른 모든 관련 브라우저 / 버전 조합 않습니다.

이것은 나를 위해 일했습니다.

if(navigator.userAgent.match(/Trident.*rv:11\./)) {
    $('body').addClass('ie11');
}

그리고 CSS 파일에서 접두사가 붙은 것들은

body.ie11 #some-other-div

이 브라우저는 언제 죽을 준비가 되었나요?

이 시도:

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

이 기사를보십시오 : CSS : 사용자 에이전트 선택기

기본적으로이 스크립트를 사용할 때 :

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':'');

이제 CSS를 사용하여 모든 브라우저 / 버전을 타겟팅 할 수 있습니다.

따라서 IE11의 경우 다음과 같이 할 수 있습니다.

깡깡이

html[data-useragent*='rv:11.0']
{
    color: green;
}

다음 속성을 사용하십시오.

• !! window.MSInputMethodContext
• !! document.msFullscreenEnabled

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\./)

아마도 Layout Engine v0.7.0이 귀하의 상황에 적합한 솔루션 일 것입니다. 브라우저 기능 감지를 사용하여 IE11 및 IE10뿐만 아니라 IE9, IE8 및 IE7도 감지 할 수 있습니다. 또한 일부 모바일 브라우저를 포함하여 다른 널리 사용되는 브라우저도 감지합니다. html 태그에 클래스를 추가하고 사용하기 쉬우 며 상당히 심층적 인 테스트에서 잘 수행됩니다.

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

Modernizr를 사용하는 경우 IE10과 IE11을 쉽게 구분할 수 있습니다.

IE10은 pointer-events속성을 지원하지 않습니다 . IE11은 그렇습니다. ( 캐니 우스 )

이제 Modernizr가 삽입하는 클래스를 기반으로 다음 CSS를 가질 수 있습니다.

.class
{ 
   /* for IE11 */
}

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

js를 사용하고 html로 클래스를 추가하여 조건부 주석 의 표준을 유지할 수 있습니다 .

  var ua = navigator.userAgent,
      doc = document.documentElement;

  if ((ua.match(/MSIE 10.0/i))) {
    doc.className = doc.className + " ie10";

  } else if((ua.match(/rv:11.0/i))){
    doc.className = doc.className + " ie11";
  }

또는 bowser와 같은 lib를 사용하십시오.

https://github.com/ded/bowser

또는 기능 감지를위한 현대화 :

http://modernizr.com/

IE와 그 버전을 감지하는 것은 실제로 매우 쉽고, 최소한 매우 직관적입니다.

var uA = navigator.userAgent;
var browser = null;
var ieVersion = null;

if (uA.indexOf('MSIE 6') >= 0) {
    browser = 'IE';
    ieVersion = 6;
}
if (uA.indexOf('MSIE 7') >= 0) {
    browser = 'IE';
    ieVersion = 7;
}
if (document.documentMode) { // as of IE8
    browser = 'IE';
    ieVersion = document.documentMode;
}

.

이런 식으로 호환성 모드 /보기에서 높은 IE 버전을 포착하고 있습니다. 다음으로 조건부 클래스를 할당하는 문제입니다.

var htmlTag = document.documentElement;
if (browser == 'IE' && ieVersion <= 11)
    htmlTag.className += ' ie11-';

이것을 시도 할 수 있습니다.

if(document.documentMode) {
  document.documentElement.className+=' ie'+document.documentMode;
}

IE11의 Gravity Form (WordPress)에서 동일한 문제가 발생했습니다. 양식의 열 스타일 "display : inline-grid"가 레이아웃을 깨뜨 렸습니다. 위의 답변을 적용하면 불일치가 해결되었습니다!

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

뒤로 물러서십시오. "내 웹 사이트에서 X를 수행해야합니다.이 브라우저가 해당 기능을 지원합니까? 그렇다면 좋은 브라우저입니다. 그렇지 않다면 사용자에게 경고해야합니다."가 아닌 "인터넷 익스플로러"를 탐지하려는 이유는 무엇입니까?

당신은 띄워한다 http://modernizr.com/을 대신 당신이 무슨 일을하는지 계속의.