Detección de IE11 mediante detección de funciones / capacidad CSS

IE10 + ya no admite etiquetas de detección de navegador para identificar un navegador.

Para detectar IE10, estoy usando JavaScript y msse define una técnica de prueba de capacidad para detectar ciertos estilos con prefijos como msTouchActiony msWrapFlow.

Quiero hacer lo mismo para IE11, pero supongo que todos los estilos de IE10 también serán compatibles con IE11. ¿Alguien puede ayudarme a identificar solo los estilos o capacidades de IE11 que podría usar para diferenciar los dos?

Información extra

• No quiero usar la detección de tipo de agente de usuario porque es muy irregular y se puede cambiar, y creo que he leído que IE11 está tratando de ocultar intencionalmente el hecho de que es Internet Explorer.
• Para ver un ejemplo de cómo funciona la prueba de capacidad de IE10, utilicé este JsFiddle (no el mío) como base para mis pruebas.
• También espero muchas respuestas de "Esto es una mala idea ...". Una de mis necesidades para esto es que IE10 afirma que es compatible con algo, pero está muy mal implementado, y quiero poder diferenciar entre IE10 e IE11 + para poder seguir adelante con un método de detección basado en capacidades en el futuro.
• Esta prueba se combina con una prueba de Modernizr que simplemente hará que algunas funciones "retrocedan" a un comportamiento menos glamoroso. No estamos hablando de funcionalidad crítica.

TAMBIÉN ya estoy usando Modernizr, pero aquí no ayuda. Necesito ayuda para encontrar una solución a mi pregunta claramente formulada, por favor.

A la luz del hilo en evolución, 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;}

IE 6 y 7

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

o

.ie67 { *property:value;}

o

.ie67 { #property:value;}

IE 6, 7 y 8

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

IE 8

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

o

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

Solo modo estándar IE 8

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

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

IE 10 solamente

_:-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-contrastmedios que MS Edge no será el objetivo, ya que Edge no es compatible-ms-high-contrast .

IE 11

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

Alternativas de JavaScript

Modernizr

Modernizr se ejecuta rápidamente al cargar la página para detectar funciones; luego crea un objeto JavaScript con los resultados y agrega clases al elemento html

Selección de 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':'');

Agrega (por ejemplo) lo siguiente al htmlelemento:

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'

Permitir selectores de CSS muy específicos, por ejemplo:

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

Nota

Si es posible, identifique y solucione cualquier problema sin hacks. Apoye la mejora progresiva y la degradación elegante . Sin embargo, este es un escenario de 'mundo ideal' que no siempre se puede obtener, como tal, lo anterior debería ayudar a proporcionar algunas buenas opciones.

Atribución / Lectura esencial

• Jeff Clayton | Browserhacks.com
• Keith Clarke
• Paul irlandés
• Devoto de la Web
• La llave inglesa

Para apuntar solo a IE10 e IE11 (y no a Edge):

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

Así que al final encontré mi propia solución a este problema.

Después de buscar en la documentación de Microsoft , logré encontrar un nuevo estilo único de IE11msTextCombineHorizontal

En mi prueba, verifico los estilos IE10 y si coinciden positivamente, verifico el estilo solo IE11. Si lo encuentro, entonces es IE11 +, si no lo encuentro, entonces es IE10.

Ejemplo de código: detectar IE10 e IE11 mediante pruebas de capacidad CSS (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>

Actualizaré el ejemplo de código con más estilos cuando los descubra.

NOTA: Es casi seguro que esto identificará a IE12 e IE13 como "IE11", ya que esos estilos probablemente seguirán adelante. Agregaré más pruebas a medida que se implementen nuevas versiones y, con suerte, podré confiar nuevamente en Modernizr.

Estoy usando esta prueba para el comportamiento alternativo. El comportamiento alternativo es simplemente un estilo menos glamoroso, no tiene una funcionalidad reducida.

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 normalmente y luego usar @supportsy verificar una propiedad que no sea compatible con IE11, por ejemplo grid-area: auto.

A continuación, puede escribir los estilos de su navegador moderno dentro de este. IE no admite la @supportsregla y usará los estilos originales, mientras que estos se anularán en los navegadores modernos que lo admitan @supports.

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

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

Aquí hay una respuesta para 2017 en adelante, donde probablemente solo le interese distinguir <= IE11 de> 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 ni siquiera es compatible @supports, y todas las demás combinaciones de navegador / versión relevantes sí lo hacen.

Esto funcionó para mi

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

Y luego, en el archivo css, las cosas con el prefijo

body.ie11 #some-other-div

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

Prueba esto:

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

Eche un vistazo a este artículo: CSS: Selectores de agentes de usuario

Básicamente, cuando usa 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 apuntar a cualquier navegador / versión.

Entonces, para IE11 podríamos hacer esto:

VIOLÍN

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

Utilice las siguientes propiedades:

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

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

además:

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 versión preliminar 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 funciona bien en algunas pruebas bastante profundas.

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

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

IE10 no admite la pointer-eventspropiedad. IE11 lo hace. ( caniuse )

Ahora, según 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 use una biblioteca como bowser:

https://github.com/ded/bowser

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

http://modernizr.com/

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 está obteniendo versiones altas de IE en Modo / Vista de compatibilidad. A continuación, es cuestión 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;
}

Me encontré con el mismo problema con un formulario de gravedad (WordPress) en IE11. El estilo de columna del formulario "display: inline-grid" rompió el diseño; la aplicación de las respuestas anteriores resolvió la discrepancia.

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

Da un paso atrás: ¿por qué estás intentando detectar "Internet Explorer" en lugar de "Mi sitio web necesita hacer X? ¿Este navegador es compatible con esa función? Si es así, buen navegador. Si no, debo advertir al usuario".

Debería acceder a http://modernizr.com/ en lugar de continuar con lo que está haciendo.