Erkennen von IE11 mit CSS-Fähigkeit / Feature-Erkennung

Im Licht der sich entwickelnden thread habe ich aktualisiert, unter:

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

IE 8-Standards-Modus Nur

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

IE 8,9 und 10

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

IE 9 nur

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

IE 10 nur

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

Den Einsatz von -ms-high-contrast bedeutet, dass MS Edge nicht angegriffen werden, als Edge nicht unterstützt -ms-high-contrast.

IE 11

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

---

Javascript-alternativen

Modernizr

Modernizr läuft schnell auf die Seite laden um zu erkennen, features, es dann
erstellt ein JavaScript-Objekt mit den Ergebnissen und fügt Klassen für die
html-element

User-agent-Auswahl

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

Hinzufügt (e ist.g) den unten html element:

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'

Ermöglicht sehr gezielte CSS-Selektoren, z.B.:

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

---

Fußnote

Wenn möglich, zu identifizieren und zu beheben jedes Problem(s) ohne hacks. Unterstützung progressive enhancement und graceful degradation. Dies ist jedoch eine 'heile Welt' - Szenario nicht immer erhältlich, als solche - das soll helfen, einige gute Möglichkeiten.

---

Attribution /Pflichtlektüre

• Jeff Clayton | Browserhacks.com
• Keith Clarke
• Paul Irish
• Web-Fromme
• Der Spanner

InformationsquelleAutor der Antwort SW4

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

InformationsquelleAutor der Antwort geoff

Werfen Sie einen Blick auf diese Artikel: CSS: User-Agent Selektoren

Grundsätzlich, 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':'');

Nun können Sie CSS verwenden, um beliebige browser /version.

Also für IE11 wir könnten dies tun:

FIDDLE

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

InformationsquelleAutor der Antwort Danield

Sollten Sie mit Modernizr, es wird zum hinzufügen einer Klasse zum body tag.

auch:

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 IE11 ist immer noch in der Vorschau, und den user-agent ändern kann, vor release.

Den Benutzer-agent-Zeichenfolge für Internet Explorer 11 ist derzeit dieses :

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

Was bedeutet, dass Ihr können einfach testen, für die Versionen 11.xx,

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

InformationsquelleAutor der Antwort Neo

Wenn Sie Modernizr - dann können Sie ganz einfach differntiate zwischen IE10 und IE11.

IE10 nicht unterstützt die pointer-events Eigenschaft. IE11 macht. (caniuse)

Nun, basierend auf der Klasse, die Modernizr fügt haben, könnten Sie den folgenden CSS:

.class
{ 
   /* for IE11 */
}

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

InformationsquelleAutor der Antwort Danield

Verwenden Sie die folgenden Eigenschaften:

• !!Fenster.MSInputMethodContext
• !!Dokument.msFullscreenEnabled

InformationsquelleAutor der Antwort Paul Sweatte

Versuchen Sie dies:

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

InformationsquelleAutor der Antwort Mahyar Farshi

Schreiben Sie Ihre IE11 code als normal und verwenden Sie dann @supports und überprüfen Sie für eine Eigenschaft, die nicht unterstützt IE11, zum Beispiel grid-area: auto.

Können Sie dann schreiben Sie Ihre moderne browser-Stile innerhalb dieser. Der IE ignoriert die @supports Regel und verwenden Sie die original-styles, in der Erwägung, dass diese überschrieben werden, in modernen Browsern.

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

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

InformationsquelleAutor der Antwort Antfish