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

87

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.

dano
quelle
3
Warum müssen Sie wissen, welchen Browser der Benutzer hat? Reichen Funktionserkennung / CSS-Präfixe / CSS-Bedingungen nicht aus?
David-SkyMesh
4
Ich habe vergessen zu erwähnen, dass wir unsere Gründe dafür haben, die Browser erkennen zu müssen, bei denen Fähigkeitstests nicht helfen. Nur eines unserer Probleme ist, dass IE10 sagt, dass es etwas unterstützt, es aber nicht sehr gut macht.
Dano
2
@ David-SkyMesh - Nein. Es ist leider nicht genug. Ich würde es gerne haben, aber es ist nicht so.
Dano
1
@Evildonald Du hast nicht geantwortet, warum du es wissen musst - speziell. Es könnte gut sein, dass dies ein XY-Problem ist. (dh: Sie bitten um Hilfe bei der X-Erkennung von IE11 - wenn wir eine andere Frage beantworten könnten Y - wie man mit mehr Browsern einschließlich IE11 für TASK Z kompatibel ist)
David-SkyMesh
1
Ich hatte eine .js, die Browserversionen erkennt, und es hieß, dass ie11 ein Firefox war. Was passiert, dh Entwickler!
Daniel Cheung

Antworten:

163

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

SW4
quelle
3
Dies sollte wirklich die Antwort sein. Großartiges Detail!
egr103
Der IE10 funktioniert nur bei mir nicht. Der Backslash-9 entfernt IE11 nicht. Ich versuche, ein Div für IE 10 zu zeigen, aber nicht für IE11 ... Es wird immer noch auf IE 11 angezeigt ...
Merc
Ah komisch. Es funktioniert auf den meisten Eigenschaften, clip: auto\9;wird aber immer noch wie clip: auto;in IE 11 interpretiert . Irgendwie wird dies nicht ignoriert ...
Merc
2
Für mich funktionierte die zweite IE10-Option für IE11: @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .relevant_selectors_for_situation {property:value;} }Ich fand sie in mediacurrent.com/blog/…
cedricdlb
1
Nachdem Sie all dies gelesen haben, sollten Sie dies -ms-high-contrast: activemöglicherweise vermeiden, da Sie gemäß den MS-Spezifikationen mit Ihren IE 10/11-Regeln tatsächlich kontrastreiche Themenbenutzer in Edge ansprechen. Auf der Seite, auf die diese Antwort verweist, -ms-high-contrastheißt es tatsächlich, dass nur der -ms-high-contrast: noneWert nicht mehr unterstützt wird. Ich denke, niemand erwähnt dies, weil die meisten Leute keinen kontrastreichen Modus aktiviert haben und die meisten Leute Edge nicht verwenden. Trotzdem gibt es jemanden da draußen, der diese Konfiguration hat, und das ist wahrscheinlich nicht cool für ihn.
Dmatamales
36

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 */   
}
Apps Tawale
quelle
1
So etwas könnte auch ein Sass Mixin sein!
Dano
2
Gilt das nur für IE11 oder auch für Edge?
Matthew Felgate
2
Zielt auf IE10 und IE11 ab, jedoch nicht auf Edge.
Jeff Clayton
23

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)

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.

dano
quelle
8
Wenn jemand diese Antwort auf -1 setzen will, muss er zumindest den Anstand haben, sich mit einem technischen Grund darauf einzulassen. Sie können damit nicht einverstanden sein .. aber es ist richtig und es funktioniert.
Dano
7
Woher wissen Sie, ob dieser Code in IE12, IE13 usw. zu korrekten Ergebnissen führt?
Evgeny
6
Warum verwenden Sie diese Methode anstelle von if (document.documentMode === 11) { ... }? Es sei denn, Sie möchten die CSS-Eigenschaft in einer @supportsat-Regel verwenden (die im IE übrigens noch nicht unterstützt wird).
Rob W
1
Wenn Ihr Body-Tag bereits Klassen enthält, werden diese überschrieben. Hier ist die sehr kleine Korrektur: jsfiddle.net/jmjpro/njvr1jq2/1 .
jbustamovej
1
Außerdem möchten Sie das ieVersion-Element mit css ausblenden: #ieVersion {display: none}
jbustamovej
18

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/

Geoff
quelle
Dieser unterscheidet nicht zwischen ie10 und ie11, aber wenn es Ihnen nichts ausmacht, auch ie10 zu erkennen, dann sind Sie gut mit diesem.
Jeff Clayton
9

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.

Jan Kyu Peblik
quelle
8

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;
    }
}
Ameisenfisch
quelle
1
Dies funktioniert und ist eine gute Lösung, aber die Argumentation ist nicht korrekt. IE11 unterstützt überhaupt nicht @supports, ignoriert also alles im @supportsBlock. Sie können also alles in die Bedingung @supports einfügen (z. B. @supports (display: block)), und IE11 überspringt es weiterhin.
CodeBiker
Dies ist, was ich mit "IE 11 wird ignorieren" gemeint habe, aber Sie haben Recht, das ist nicht ganz klar. Ich habe die Antwort aktualisiert, um klarer zu machen, dass der IE @supports nicht unterstützt.
Ameisenfisch
4

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?

Bert Oost
quelle
4

Versuche dies:

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

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;
}
Danield
quelle
1
Das würde in Firefox 11 kaputt gehen (obwohl es jetzt nicht unterstützt wird, ist es wichtig). Es hat auch rv:11.0in seiner Benutzeragentenzeichenfolge.
PhistucK
3

Verwenden Sie die folgenden Eigenschaften:

  • !! window.MSInputMethodContext
  • !! document.msFullscreenEnabled
Paul Sweatte
quelle
2

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\./)
Neo
quelle
Danke Neo, aber ich füge meinem Body-Tag bereits eine Klasse hinzu UND benutze Modernizr. Ich bin auf der Suche nach einem Weg, IE10 von IE11 zu unterscheiden, ohne User Agent zu verwenden, der nicht vertrauenswürdig ist.
Dano
Fehlender Doppelpunkt in rv 11. var isIE11 = !! navigator.userAgent.match (/Trident.*rv:11 \ ./)
T.CK
2

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

Talkingrock
quelle
2

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 */
}
Danield
quelle
2

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/

Liko
quelle
2

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-';
Frank Conijn
quelle
2

Sie können dies versuchen:

if(document.documentMode) {
  document.documentElement.className+=' ie'+document.documentMode;
}
Adrian Miranda
quelle
2

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 */
}
leonel.ai
quelle
1

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.

Mike 'Pomax' Kamermans
quelle
Vielen Dank für eine alternative Lösung, aber ich verwende Modernizr bereits, und IE10 stellt seine Funktionen falsch dar.
Dano
4
Ich gehe davon aus, dass Sie wissen, welche und ein Problem bei Modernizr eingereicht haben, damit diese weitere Modernizrs-Prüfungen für diesen bestimmten Browser hinzufügen können. (Wenn nicht, sollten Sie. Wenn Sie etwas finden, das Hunderttausende von Entwicklern betrifft, ist es das einzig Richtige, dies bei den Verantwortlichen für die Unterlegscheibe
einzureichen.
7
Für diejenigen von uns, die benutzerbezogenen Code schreiben, benötigen Sie jetzt häufig eine Antwort , keinen Fehler, der in einer Bibliothek eines Drittanbieters abgelegt wurde, und keinen Patch dort. Das heißt, es ist schön, dass Sie möchten, dass sie Modernizr verbessern, aber es passt hier nicht.
Dean J
1
Ich denke, das Erkennen des echten Browsers ist per se ein vernünftiges Ziel.
GWG
@ DeanJ sicher, und auf diese Fragen wird auch jemand anderes eine Antwort geben. Das macht es nicht weniger wichtig, Antworten wie diese zu erhalten, die Ihnen sagen, dass Sie darüber nachdenken sollen, was Sie tun. Außerdem gab es zum Zeitpunkt der Antwort keine Änderungen an der Post und es gab keine Erwähnung von "Ich brauche es, um jetzt zu funktionieren", so dass ich keinen Grund hatte anzunehmen, dass sie keine Realitätsprüfung wollten.
Mike 'Pomax' Kamermans