[internet-explorer-11] CSS 기능 / 기능 감지를 사용하여 IE11 감지

Question 1

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

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

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

추가 정보

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

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

Question 2

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

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

각주

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

기여 / 필수 독서

Question 3

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

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

Question 4

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

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

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

Question 5

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

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

Question 6

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

Question 7

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

Question 8

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

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

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

body.ie11 #some-other-div

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