internet explorer 11 - predeterminado - Detectando IE11 usando CSS Capability/Feature Detection

document mode internet explorer 11

Question

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

Para detectar IE10 estoy usando JavaScript y una técnica de prueba de capacidad para detectar ciertos estilos prefijados de ms , como msTouchAction y msWrapFlow .

Quiero hacer lo mismo para IE11, pero supongo que todos los estilos IE10 también serán compatibles con IE11. ¿Alguien puede ayudarme a identificar IE11 solo estilos o capacidades que podría utilizar para distinguirlos a 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 intenta ocultar el hecho de que es Internet Explorer.
• Para un ejemplo de cómo funciona la prueba de capacidad IE10, utilicé este JsFiddle (no el mío) como base para mi prueba.
• También estoy esperando muchas respuestas de "Esta 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 +, así puedo continuar 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 funcionalidades se "replieguen" a un comportamiento menos glamoroso. No estamos hablando de funcionalidad crítica.

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

Answer 1

A la luz del hilo evolutivo, he actualizado el 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;}
}

IE 8 solo modo estándar

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

IE 8,9 y 10

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

Solo IE 9

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

Solo IE 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 se orientará, 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; 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) el elemento de abajo a 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''

Permitir selectores de CSS muy orientados, 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 cortes. Admite mejora progresiva y degradación elegante . Sin embargo, este es un escenario de "mundo ideal" que no siempre se puede obtener, por lo tanto, lo anterior debería ayudar a proporcionar algunas buenas opciones.

Atribución / lectura esencial

• Jeff Clayton | Browserhacks.com
• Keith Clarke
• Paul Irish
• Web Devout
• La llave

Answer 2

Aquí hay una respuesta para 2017, donde probablemente solo le interese distinguir <= IE11 de> IE11 ("Edge"):

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

Un 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 admite @supports , y todas las otras combinaciones relevantes de navegador / versión sí.

También es probable que -ms-foo alguna propiedad propietaria de -ms-foo que sea compatible con IE11 pero que no sea compatible con IE11, en cuyo caso podría usar @supports (--what: evr) { } para dirigir IE11 solo en lugar de usar el anulación antes mencionada.

Answer 3

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 de IE11 solo msTextCombineHorizontal

En mi prueba, compruebo los estilos IE10 y si son una coincidencia positiva, entonces busco el estilo IE11. Si lo encuentro, entonces es IE11 +, si no lo hago, entonces es IE10.

Ejemplo de código: Detectar IE10 e IE11 mediante CSS Capability Testing (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á IE12 e IE13 como "IE11", ya que esos estilos probablemente continuarán. Agregaré más pruebas a medida que aparezcan nuevas versiones, y espero que pueda confiar nuevamente en Modernizr.

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

Answer 4

Da un paso atrás: ¿por qué estás tratando de detectar "Internet Explorer" en lugar de "mi sitio web necesita hacer X", si este navegador es compatible con esa característica? Si es así, buen navegador. De lo contrario, debería advertir al usuario ".

Deberías presionar Modernizr lugar de continuar lo que estás haciendo.

Answer 5

Deberías usar Modernizr, agregará una clase a la etiqueta corporal.

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 aún está en la vista previa y que el agente de usuario puede cambiar antes de la publicación.

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 tu puedes simplemente probar, para las versiones 11.xx,

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

Answer 6

Eche un vistazo a este artículo: CSS: selectores de agente de usuario

Básicamente, cuando usas 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:

FIDDLE

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

Answer 7

Esto funcionó para mí

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

Y luego en el archivo css cosas prefijadas con

body.ie11 #some-other-div

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

Answer 8

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/

Answer 9

La detección de IE y sus versiones en realidad es extremadamente fácil, al menos extremadamente intuitiva:

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 forma, también está capturando versiones de alto IE en modo / vista de compatibilidad. A continuación, es una cuestión de asignar clases condicionales:

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

Answer 10

Prueba esto:

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

Answer 11

Puede escribir su código IE11 de forma normal y luego usar @supports y buscar una propiedad que no sea compatible con IE11, por ejemplo grid-area: auto .

A continuación, puede escribir sus estilos modernos de navegador dentro de este. IE ignorará la regla @supports y usará 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;
    }
}

Answer 12

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 un lib como bowser:

https://github.com/ded/bowser

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

Modernizr

Answer 13

Puedes intentar esto:

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

Answer 14

Quizás Layout Engine v0.7.0 es una buena solución para su situación. Utiliza detección de características 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

Answer 15

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

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

Ahora, en función de la clase que inserta Modernizr, podría tener el siguiente CSS:

.class
{ 
   /* for IE11 */
}

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

Answer 16

Use las siguientes propiedades:

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

Answer 17

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

}

agregue todas sus clases o propiedades de CSS.