Erkennen von IE11 mithilfe der CSS-Fähigkeits- / Funktionserkennung

IE10 + unterstützt keine Browsererkennungs-Tags mehr, um einen Browser zu identifizieren.

Zum Erkennen von IE10 verwende ich JavaScript und eine Fähigkeitstesttechnik zum Erkennen bestimmter msvorangestellter Stile wie msTouchActionund msWrapFlow.

Ich möchte dasselbe für IE11 tun, gehe aber davon aus, dass alle IE10-Stile auch in IE11 unterstützt werden. Kann mir jemand helfen, nur IE11-Stile oder -Funktionen zu identifizieren, mit denen ich die beiden voneinander unterscheiden kann?

Zusatzinformation

• Ich möchte die Benutzeragenten-Typerkennung nicht verwenden, da sie so fleckig ist und geändert werden kann. Ich glaube, ich habe gelesen, dass IE11 absichtlich versucht, die Tatsache zu verbergen, dass es sich um Internet Explorer handelt.
• Als Beispiel für die Funktionsweise des IE10-Funktionstests habe ich diese JsFiddle (nicht meine) als Grundlage für meine Tests verwendet.
• Außerdem erwarte ich viele Antworten von "Das ist eine schlechte Idee ...". Eine meiner Anforderungen hierfür ist, dass IE10 behauptet, etwas zu unterstützen, aber es ist sehr schlecht implementiert, und ich möchte in der Lage sein, zwischen IE10 und IE11 + zu unterscheiden, damit ich in Zukunft mit einer funktionsbasierten Erkennungsmethode fortfahren kann.
• Dieser Test ist mit einem Modernizr-Test gekoppelt, bei dem einige Funktionen einfach auf weniger glamouröses Verhalten zurückgreifen. Wir sprechen nicht über kritische Funktionen.

AUCH ich benutze bereits Modernizr, aber es hilft hier nicht. Ich brauche Hilfe, um meine klar gestellte Frage zu lösen.

Angesichts des sich entwickelnden Threads habe ich Folgendes aktualisiert:

IE 6

* html .ie6 {property:value;}

oder

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

oder

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

IE 6 und 7

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

oder

.ie67 { *property:value;}

oder

.ie67 { #property:value;}

IE 6, 7 und 8

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

IE 8

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

oder

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

Nur IE 8-Standardmodus

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

IE 8,9 und 10

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

Nur IE 9

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

IE 9 und höher

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

IE 9 und 10

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

Nur IE 10

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

IE 10 und höher

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

oder

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

Die Verwendung von -ms-high-contrastbedeutet, dass MS Edge nicht als Ziel ausgewählt wird, da Edge dies nicht unterstützt-ms-high-contrast .

IE 11

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

Javascript-Alternativen

Modernizr

Modernizr wird beim Laden der Seite schnell ausgeführt, um Funktionen zu erkennen. Anschließend wird ein JavaScript-Objekt mit den Ergebnissen erstellt und dem HTML-Element Klassen hinzugefügt

Auswahl des Benutzeragenten

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

Fügt dem htmlElement (z. B.) Folgendes hinzu :

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'

Zulassen sehr zielgerichteter CSS-Selektoren, z.

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

Fußnote

Identifizieren und beheben Sie nach Möglichkeit alle Probleme ohne Hacks. Unterstützen Sie die fortschreitende Verbesserung und den würdevollen Abbau . Dies ist jedoch ein Szenario der „idealen Welt“, das nicht immer verfügbar ist. Daher sollte das oben Gesagte dazu beitragen, einige gute Optionen bereitzustellen.

Namensnennung / Grundlegendes Lesen

• Jeff Clayton | Browserhacks.com
• Keith Clarke
• Paul Irish
• Web Devout
• Der Schraubenschlüssel

Nur auf IE10 und IE11 (und nicht auf Edge) abzielen:

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

Also habe ich am Ende meine eigene Lösung für dieses Problem gefunden.

Nach dem Durchsuchen der Microsoft-Dokumentation konnte ich einen neuen Nur-IE11-Stil findenmsTextCombineHorizontal

In meinem Test überprüfe ich, ob IE10-Stile vorhanden sind. Wenn sie positiv übereinstimmen, überprüfe ich, ob nur IE11-Stile vorhanden sind. Wenn ich es finde, dann ist es IE11 +, wenn ich es nicht tue, dann ist es IE10.

Codebeispiel : Erkennen von IE10 und IE11 durch CSS Capability Testing (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>

Ich werde das Codebeispiel mit weiteren Stilen aktualisieren, wenn ich sie entdecke.

HINWEIS: Dadurch werden IE12 und IE13 mit ziemlicher Sicherheit als "IE11" identifiziert, da diese Stile wahrscheinlich übernommen werden. Ich werde weitere Tests hinzufügen, wenn neue Versionen herauskommen, und mich hoffentlich wieder auf Modernizr verlassen können.

Ich verwende diesen Test für das Fallback-Verhalten. Das Fallback-Verhalten ist nur weniger glamourös, es hat keine eingeschränkte Funktionalität.

Das scheint zu funktionieren:

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

Hier ist eine Antwort für 2017, bei der es Ihnen wahrscheinlich nur darum geht, <= IE11 von> IE11 ("Edge") zu unterscheiden:

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

Demonstrativeres Beispiel:

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

Dies funktioniert, weil IE11 nicht einmal unterstützt @supportsund alle anderen relevanten Browser- / Versionskombinationen dies tun.

Sie können Ihren IE11-Code wie gewohnt schreiben und dann beispielsweise @supportseine Eigenschaft verwenden und prüfen, die in IE11 nicht unterstützt wird grid-area: auto.

Darin können Sie dann Ihre modernen Browser-Stile schreiben. IE unterstützt die @supportsRegel nicht und verwendet die ursprünglichen Stile, während diese in modernen Browsern, die dies unterstützen, überschrieben werden @supports.

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

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

Das hat bei mir funktioniert

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

Und dann in der CSS-Datei Dinge vorangestellt

body.ie11 #some-other-div

Wann ist dieser Browser bereit zu sterben?

Versuche dies:

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

Schauen Sie sich diesen Artikel an: CSS: User Agent Selectors

Grundsätzlich gilt: Wenn Sie dieses Skript verwenden:

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

Sie können jetzt CSS verwenden, um auf einen beliebigen Browser / eine beliebige Version abzuzielen.

Für IE11 könnten wir also Folgendes tun:

GEIGE

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

Verwenden Sie die folgenden Eigenschaften:

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

Sie sollten Modernizr verwenden, um dem Body-Tag eine Klasse hinzuzufügen.

ebenfalls:

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

Beachten Sie, dass sich IE11 noch in der Vorschau befindet und sich der Benutzeragent möglicherweise vor der Veröffentlichung ändert.

Die User-Agent-Zeichenfolge für IE 11 lautet derzeit:

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

Das heißt, Sie können einfach testen, für Versionen 11.xx,

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

Vielleicht ist Layout Engine v0.7.0 eine gute Lösung für Ihre Situation. Es verwendet die Erkennung von Browserfunktionen und kann nicht nur IE11 und IE10, sondern auch IE9, IE8 und IE7 erkennen. Es erkennt auch andere beliebte Browser, einschließlich einiger mobiler Browser. Es fügt dem HTML-Tag eine Klasse hinzu, ist einfach zu verwenden und wird unter einigen ziemlich gründlichen Tests gut ausgeführt.

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

Wenn Sie Modernizr verwenden , können Sie leicht zwischen IE10 und IE11 unterscheiden.

IE10 unterstützt die pointer-eventsEigenschaft nicht. IE11 tut. ( caniuse )

Basierend auf der Klasse, die Modernizr einfügt, könnten Sie nun das folgende CSS haben:

.class
{ 
   /* for IE11 */
}

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

Sie können js verwenden und eine Klasse in HTML hinzufügen, um den Standard der bedingten Kommentare beizubehalten :

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

Oder verwenden Sie eine Bibliothek wie Bowser:

https://github.com/ded/bowser

Oder modernizr zur Funktionserkennung:

http://modernizr.com/

Das Erkennen des IE und seiner Versionen ist äußerst einfach, zumindest äußerst intuitiv:

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

.

Auf diese Weise erhalten Sie auch Versionen mit hohem IE im Kompatibilitätsmodus / in der Ansicht. Als nächstes geht es darum, bedingte Klassen zuzuweisen:

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

Sie können dies versuchen:

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

Ich bin auf dasselbe Problem mit einem Gravity Form (WordPress) in IE11 gestoßen. Der Spaltenstil des Formulars "Anzeige: Inline-Raster" hat das Layout beschädigt. Durch Anwenden der obigen Antworten wurde die Diskrepanz behoben!

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

Schritt zurück: Warum versuchen Sie überhaupt, "Internet Explorer" zu erkennen, anstatt "meine Website muss X ausführen? Unterstützt dieser Browser diese Funktion? Wenn ja, guter Browser. Wenn nicht, sollte ich den Benutzer warnen".

Sie sollten http://modernizr.com/ aufrufen, anstatt fortzufahren, was Sie tun.