Detección de IE11 utilizando la Capacidad de CSS / Detección de Características

A la luz del hilo evolutivo, he actualizado lo siguiente:

IE 6

* html .ie6 {property:value;}

O

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

O

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

ES decir, 6 y 7

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

O

.ie67 { *property:value;}

O

.ie67 { #property:value;}

ES decir, 6, 7 y 8

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

IE 8

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

O

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

ES decir, Solo Modo Estándar de 8

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

ES decir, 8,9 y 10

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

IE 9 solamente

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

IE 9 y superior

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

IE 9 y 10

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

ES decir, solo 10

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

IE 10 y superior

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

O

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

El uso de -ms-high-contrast significa que MS Edge no será el objetivo, ya que Edge no admite -ms-high-contrast.

IE 11

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

Alternativas de Javascript

Modernizr

Modernizr se ejecuta rápidamente en la carga de la página para detectar características; entonces crea un objeto JavaScript con los resultados, y añade clases a la HTML elemento

Selección del agente de usuario

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

Añade (por ejemplo) lo siguiente al elemento html:

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'

Permite selectores CSS muy dirigidos, por ejemplo:

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

Nota de pie de página

Si es posible, identifique y corrija cualquier problema sin hacks. Apoyo mejora progresiva y la degradación de la. Sin embargo, este es un escenario de 'mundo ideal' no siempre obtenible, ya que tal-lo anterior debe ayudar a proporcionar algunas buenas opciones.

Atribución / Lectura esencial

• [108] Jeff Clayton | Browserhacks.com
• Keith Clarke
• Paul Irish
• Devota Web
• La llave inglesa

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  

}

Agregue todas sus clases o propiedades CSS.

Esto parece funcionar:

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

Puede escribir su código IE11 como normal y luego usar @supports y comprobar si hay una propiedad que no esté soportada en IE11, por ejemplo grid-area: auto.

Luego puede escribir sus estilos de navegador modernos dentro de esto. IE ignorará la regla @supports y utilizará los estilos originales, mientras que estos se anularán en los navegadores modernos.

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

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

Esto funcionó para mí

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

Y luego en el archivo css cosas con el prefijo

body.ie11 #some-other-div

¿Cuándo está listo este navegador para morir?

Echa un vistazo a este artículo: CSS: User Agent Selectors

Básicamente, cuando se utiliza este script:

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

Ahora puede usar CSS para dirigirse a cualquier navegador / versión.

Así que para IE11 podríamos hacer esto:

FIDDLE

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

Prueba esto:

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

Aquí hay una respuesta para 2017, donde probablemente solo te importe distinguir IE11 ("Edge"):

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

Ejemplo más demostrativo:

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

Esto funciona porque IE11 en realidad ni siquiera soporta @supports, y todas las otras combinaciones relevantes de navegador/versión lo hacen.

También es probable que exista alguna propiedad propietaria -ms-foo que admite IE11 pero >IE11 no admite, en cuyo caso podría usar @supports (--what: evr) { } para dirigirse directamente a IE11 solo en su lugar sobre el uso de la anulación antes mencionada.

Debe usar Modernizr, agregará una clase a la etiqueta body.

También:

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

Tenga en cuenta que IE11 todavía está en vista previa, y el agente de usuario puede cambiar antes del lanzamiento.

La cadena de agente de usuario para IE 11 es actualmente esta:

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

Lo que significa que puede simplemente probar, para las versiones 11.xx,

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

Quizás Layout Engine v0.7.0 sea una buena solución para su situación. Utiliza la detección de funciones del navegador y puede detectar no solo IE11 e IE10, sino también IE9, IE8 e IE7. También detecta otros navegadores populares, incluidos algunos navegadores móviles. Agrega una clase a la etiqueta html, es fácil de usar y se realiza bien bajo algunas pruebas bastante profundas.

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

Si está utilizando Modernizr, entonces puede diferenciar fácilmente entre IE10 e IE11.

IE10 no soporta la propiedad pointer-events. IE11 lo hace. (caniuse )

Ahora, basado en la clase que inserta Modernizr, podría tener el siguiente CSS:

.class
{ 
   /* for IE11 */
}

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

Puede usar js y agregar una clase en html para mantener el estándar de comentarios condicionales :

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

O usa una lib como bowser:

Https://github.com/ded/bowser

O modernizr para la detección de características:

Http://modernizr.com/

Utilice las siguientes propiedades:

• !!ventana.MSInputMethodContext
• !!documento.msFullscreenEnabled

Detectar IE y sus versiones en realidad es extremadamente fácil, al menos extremadamente intuitivo:

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

.

De esta manera, también estamos capturando versiones IE altas en Modo/Vista de compatibilidad. A continuación, se trata de asignar clases condicionales:

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

Puedes probar esto:

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

Paso atrás: ¿por qué está tratando de detectar "Internet explorer" en lugar de "mi sitio web necesita hacer X, este navegador admite esa función? Si es así, buen navegador. Si no, entonces debo advertir al usuario".

Usted debe golpear para arriba http://modernizr.com / en lugar de continuar con lo que estás haciendo.