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

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-contrastEdge가 .NET Framework를 지원하지 않으므로-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
• 스패너

---

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

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

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

---

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

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

---

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

@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 Framework를 지원하는 최신 브라우저에서는 재정의됩니다 @supports.

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

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

---

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

---

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

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

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

body.ie11 #some-other-div

이 브라우저는 언제 죽을 준비가 되었습니까?

---

이 기사를보십시오 : 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;
}

---

이 시도:

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

---

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 doesn't support the pointer-events property. IE11 does. (caniuse)

Now, based on the class which Modernizr inserts you could have the following CSS:

.class
{ 
   /* for IE11 */
}

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

---

You can use js and add a class in html to maintain the standard of conditional comments:

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

Or use a lib like bowser:

https://github.com/ded/bowser

Or modernizr for feature detection:

http://modernizr.com/

---

Use the following properties:

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

---

Detecting IE and its versions actually is extremely easy, at least extremely intuitive:

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

.

This way, ou're also catching high IE versions in Compatibility Mode/View. Next, its a matter of assigning conditional classes:

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

---

You can try this:

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

---

I ran into the same problem with a Gravity Form (WordPress) in IE11. The form's column style "display: inline-grid" broke the layout; applying the answers above resolved the discrepancy!

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

---

Step back: why are you even trying to detect "internet explorer" rather than "my website needs to do X, does this browser support that feature? If so, good browser. If not, then I should warn the user".

You should hit up http://modernizr.com/ instead of continuing what you're doing.

참고URL : https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection