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 ms
vorangestellter Stile wie msTouchAction
und 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.
Antworten:
Angesichts des sich entwickelnden Threads habe ich Folgendes aktualisiert:
IE 6
oder
IE 7
oder
IE 6 und 7
oder
oder
IE 6, 7 und 8
IE 8
oder
Nur IE 8-Standardmodus
IE 8,9 und 10
Nur IE 9
IE 9 und höher
IE 9 und 10
Nur IE 10
IE 10 und höher
oder
Die Verwendung von
-ms-high-contrast
bedeutet, dass MS Edge nicht als Ziel ausgewählt wird, da Edge dies nicht unterstützt-ms-high-contrast
.IE 11
Javascript-Alternativen
Modernizr
Auswahl des Benutzeragenten
Javascript:
Fügt dem
html
Element (z. B.) Folgendes hinzu :Zulassen sehr zielgerichteter CSS-Selektoren, z.
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
quelle
clip: auto\9;
wird aber immer noch wieclip: auto;
in IE 11 interpretiert . Irgendwie wird dies nicht ignoriert ...@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .relevant_selectors_for_situation {property:value;} }
Ich fand sie in mediacurrent.com/blog/…-ms-high-contrast: active
mö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-contrast
heißt es tatsächlich, dass nur der-ms-high-contrast: none
Wert 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.Nur auf IE10 und IE11 (und nicht auf Edge) abzielen:
quelle
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 finden
msTextCombineHorizontal
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)
Code-Snippet anzeigen
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.
quelle
if (document.documentMode === 11) { ... }
? Es sei denn, Sie möchten die CSS-Eigenschaft in einer@supports
at-Regel verwenden (die im IE übrigens noch nicht unterstützt wird).Das scheint zu funktionieren:
https://www.limecanvas.com/css-hacks-for-targeting-ie-10-and-above/
quelle
Hier ist eine Antwort für 2017, bei der es Ihnen wahrscheinlich nur darum geht, <= IE11 von> IE11 ("Edge") zu unterscheiden:
Demonstrativeres Beispiel:
Dies funktioniert, weil IE11 nicht einmal unterstützt
@supports
und alle anderen relevanten Browser- / Versionskombinationen dies tun.quelle
Sie können Ihren IE11-Code wie gewohnt schreiben und dann beispielsweise
@supports
eine Eigenschaft verwenden und prüfen, die in IE11 nicht unterstützt wirdgrid-area: auto
.Darin können Sie dann Ihre modernen Browser-Stile schreiben. IE unterstützt die
@supports
Regel nicht und verwendet die ursprünglichen Stile, während diese in modernen Browsern, die dies unterstützen, überschrieben werden@supports
.quelle
@supports
, ignoriert also alles im@supports
Block. Sie können also alles in die Bedingung @supports einfügen (z. B.@supports (display: block)
), und IE11 überspringt es weiterhin.Das hat bei mir funktioniert
Und dann in der CSS-Datei Dinge vorangestellt
Wann ist dieser Browser bereit zu sterben?
quelle
Versuche dies:
quelle
Schauen Sie sich diesen Artikel an: CSS: User Agent Selectors
Grundsätzlich gilt: Wenn Sie dieses Skript verwenden:
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
quelle
rv:11.0
in seiner Benutzeragentenzeichenfolge.Verwenden Sie die folgenden Eigenschaften:
quelle
Sie sollten Modernizr verwenden, um dem Body-Tag eine Klasse hinzuzufügen.
ebenfalls:
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:
Das heißt, Sie können einfach testen, für Versionen 11.xx,
quelle
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
quelle
Wenn Sie Modernizr verwenden , können Sie leicht zwischen IE10 und IE11 unterscheiden.
IE10 unterstützt die
pointer-events
Eigenschaft nicht. IE11 tut. ( caniuse )Basierend auf der Klasse, die Modernizr einfügt, könnten Sie nun das folgende CSS haben:
quelle
Sie können js verwenden und eine Klasse in HTML hinzufügen, um den Standard der bedingten Kommentare beizubehalten :
Oder verwenden Sie eine Bibliothek wie Bowser:
https://github.com/ded/bowser
Oder modernizr zur Funktionserkennung:
http://modernizr.com/
quelle
Das Erkennen des IE und seiner Versionen ist äußerst einfach, zumindest äußerst intuitiv:
.
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:
quelle
Sie können dies versuchen:
quelle
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!
quelle
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.
quelle