Wykrywanie IE11 za pomocą CSS Capability / Feature Detection

IE10 + nie obsługuje już tagów wykrywania przeglądarki w celu identyfikacji przeglądarki.

Do wykrywania IE10 używam JavaScript i mszdefiniowano technikę testowania możliwości w celu wykrycia pewnych stylów z przedrostkami, takich jak msTouchActioni msWrapFlow.

Chcę zrobić to samo dla IE11, ale zakładam, że wszystkie style IE10 będą również obsługiwane w IE11. Czy ktoś może mi pomóc zidentyfikować tylko style lub możliwości IE11, które pozwolą mi je rozróżnić?

Informacje dodatkowe

• Nie chcę używać wykrywania typu User Agent, ponieważ jest tak nierówny i można go zmienić, a także wydaje mi się, że czytałem, że IE11 celowo próbuje ukryć fakt, że jest to Internet Explorer.
• Aby zobaczyć, jak działa testowanie wydajności IE10, użyłem tego JsFiddle (nie mojego) jako podstawy do moich testów.
• Spodziewam się też wielu odpowiedzi „To zły pomysł…”. Jedną z moich potrzeb jest to, że IE10 twierdzi, że coś obsługuje, ale jest bardzo źle zaimplementowany i chcę móc odróżnić IE10 od IE11 +, aby móc w przyszłości przejść do metody wykrywania opartej na możliwościach.
• Ten test jest połączony z testem Modernizr, który po prostu sprawi, że niektóre funkcje będą „zastępować” mniej efektowne zachowanie. Nie mówimy o krytycznej funkcjonalności.

TAKŻE używam już Modernizr, ale to nie pomaga tutaj. Potrzebuję pomocy w rozwiązaniu mojego jasno zadanego pytania.

W świetle rozwijającego się wątku zaktualizowałem poniżej:

IE 6

* html .ie6 {property:value;}

lub

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

lub

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

IE 6 i 7

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

lub

.ie67 { *property:value;}

lub

.ie67 { #property:value;}

IE 6, 7 i 8

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

IE 8

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

lub

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

Tylko tryb standardów IE 8

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

IE 8,9 i 10

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

Tylko IE 9

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

IE 9 i nowsze

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

IE 9 i 10

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

Tylko IE 10

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

IE 10 i nowsze

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

lub

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

Użycie -ms-high-contrastoznacza, że ​​MS Edge nie będzie celem, ponieważ Edge nie obsługuje-ms-high-contrast .

IE 11

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

Alternatywy dla JavaScript

Modernizr

Modernizr działa szybko podczas ładowania strony, aby wykrywać funkcje; następnie tworzy obiekt JavaScript z wynikami i dodaje klasy do elementu html

Wybór klienta użytkownika

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

Dodaje (np.) Poniższe do htmlelementu:

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'

Umożliwienie bardzo ukierunkowanych selektorów CSS, np .:

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

Notatka

Jeśli to możliwe, zidentyfikuj i napraw wszelkie problemy bez hacków. Wspieraj stopniowe ulepszanie i wdzięczną degradację . Jest to jednak scenariusz „idealnego świata”, który nie zawsze jest możliwy do uzyskania, jako taki - powyższe powinno pomóc w zapewnieniu kilku dobrych opcji.

Atrybucja / Essential Reading

• Jeff Clayton | Browserhacks.com
• Keith Clarke
• Paul Irish
• Web Devout
• Klucz

Aby kierować reklamy tylko na IE10 i IE11 (a nie Edge):

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

Więc w końcu znalazłem własne rozwiązanie tego problemu.

Po przeszukaniu dokumentacji Microsoftu udało mi się znaleźć nowy styl tylko dla IE11msTextCombineHorizontal

W moim teście sprawdzam style IE10 i jeśli są one zgodne, sprawdzam tylko styl IE11. Jeśli go znajdę, to IE11 +, jeśli nie, to IE10.

Przykład kodu: Wykryj IE10 i IE11 za pomocą testów możliwości CSS (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>

Zaktualizuję przykładowy kod o więcej stylów, gdy je odkryję.

UWAGA: To prawie na pewno zidentyfikuje IE12 i IE13 jako „IE11”, ponieważ te style prawdopodobnie będą kontynuowane. Dodam kolejne testy, gdy pojawią się nowe wersje i mam nadzieję, że będę mógł ponownie polegać na Modernizrze.

Używam tego testu do zachowania awaryjnego. Zachowanie rezerwowe jest po prostu mniej efektowną stylizacją, nie ma ograniczonej funkcjonalności.

To wydaje się działać:

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

Możesz napisać swój kod IE11 w normalny sposób, a następnie użyć @supportsi sprawdzić na przykład właściwość, która nie jest obsługiwana w IE11 grid-area: auto.

Następnie możesz w nim napisać nowoczesne style przeglądarki. IE nie obsługuje @supportsreguły i użyje oryginalnych stylów, podczas gdy te zostaną nadpisane w nowoczesnych przeglądarkach, które obsługują @supports.

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

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

Oto odpowiedź na 2017 rok, gdzie prawdopodobnie zależy Ci tylko na odróżnieniu <= IE11 od> IE11 ("Edge"):

@supports not (old: ie) { /* code for not old IE here */ }

Bardziej poglądowy przykład:

body:before { content: 'old ie'; }
/**/@supports not (old: ie) {
body:before { content: 'not old ie'; }
/**/}

To działa, ponieważ IE11 w rzeczywistości nawet nie obsługuje @supports, a wszystkie inne odpowiednie kombinacje przeglądarki / wersji tak.

To zadziałało dla mnie

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

A potem w pliku css rzeczy z prefiksem

body.ie11 #some-other-div

Kiedy ta przeglądarka jest gotowa na śmierć?

Spróbuj tego:

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

Spójrz na ten artykuł: CSS: selektory agenta użytkownika

Zasadniczo, gdy używasz tego skryptu:

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

Możesz teraz używać CSS do kierowania reklam na dowolną przeglądarkę / wersję.

Więc dla IE11 możemy to zrobić:

SKRZYPCE

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

Użyj następujących właściwości:

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

Powinieneś użyć Modernizr, doda klasę do tagu body.

również:

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

Należy zauważyć, że IE11 jest nadal w wersji zapoznawczej, a agent użytkownika może ulec zmianie przed wydaniem.

Ciąg agenta użytkownika dla IE 11 to obecnie:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko

Oznacza to, że możesz po prostu przetestować, dla wersji 11.xx,

var isIE11 = !!navigator.userAgent.match(/Trident.*rv 11\./)

Być może Layout Engine v0.7.0 jest dobrym rozwiązaniem w Twojej sytuacji. Wykorzystuje wykrywanie funkcji przeglądarki i może wykryć nie tylko IE11 i IE10, ale także IE9, IE8 i IE7. Wykrywa także inne popularne przeglądarki, w tym niektóre przeglądarki mobilne. Dodaje klasę do tagu html, jest łatwy w użyciu i dobrze się sprawdza w dość dokładnych testach.

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

Jeśli używasz Modernizr - możesz łatwo odróżnić IE10 od IE11.

IE10 nie obsługuje tej pointer-eventswłaściwości. IE11 tak. ( caniuse )

Teraz, w oparciu o klasę wstawioną przez Modernizr, możesz mieć następujący CSS:

.class
{ 
   /* for IE11 */
}

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

Możesz użyć js i dodać klasę w html, aby zachować standard warunkowych komentarzy :

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

Lub użyj biblioteki, takiej jak bowser:

https://github.com/ded/bowser

Lub zmodernizuj do wykrywania funkcji:

http://modernizr.com/

Wykrywanie IE i jego wersji jest w rzeczywistości niezwykle łatwe, a przynajmniej niezwykle intuicyjne:

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

.

W ten sposób wychwytujesz również wersje z wysokim IE w trybie / widoku zgodności. Następnie chodzi o przypisanie klas warunkowych:

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

Możesz spróbować tego:

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

Napotkałem ten sam problem z Gravity Form (WordPress) w IE11. Styl kolumny formularza „display: inline-grid” zepsuł układ; zastosowanie powyższych odpowiedzi rozwiązało tę rozbieżność!

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

Cofnij się: dlaczego w ogóle próbujesz wykryć „Internet Explorer” zamiast „moja witryna musi wykonać X. Czy ta przeglądarka obsługuje tę funkcję? Jeśli tak, dobra przeglądarka. Jeśli nie, to powinienem ostrzec użytkownika”.

Powinieneś trafić na http://modernizr.com/ zamiast kontynuować to, co robisz.