Detectando o IE11 usando o recurso CSS / detecção de recursos

O IE10 + não oferece mais suporte a tags de detecção de navegador para identificar um navegador.

Para detectar o IE10, estou usando JavaScript e uma técnica de teste de capacidade para detectar certos msestilos prefixados são definidos como msTouchActione msWrapFlow.

Desejo fazer o mesmo para o IE11, mas presumo que todos os estilos do IE10 também terão suporte no IE11. Alguém pode me ajudar a identificar apenas os estilos ou recursos do IE11 que eu possa usar para diferenciá-los?

Informação extra

• Não quero usar a detecção de tipo de agente do usuário porque é muito irregular e pode ser alterada, também acho que li que o IE11 está intencionalmente tentando esconder o fato de que é o Internet Explorer.
• Para obter um exemplo de como funciona o teste de capacidade do IE10, usei este JsFiddle (não o meu) como base para meu teste.
• Também estou esperando muitas respostas de "Esta é uma má ideia ...". Uma das minhas necessidades para isso é que o IE10 afirma que oferece suporte a algo, mas está muito mal implementado, e quero ser capaz de diferenciar entre o IE10 e o IE11 + para poder prosseguir com um método de detecção baseado em capacidade no futuro.
• Este teste é acoplado a um teste Modernizr que simplesmente tornará algumas funcionalidades "alternativas" para um comportamento menos glamoroso. Não estamos falando sobre funcionalidade crítica.

TAMBÉM já estou usando o Modernizr, mas não ajuda aqui. Preciso de ajuda para uma solução para minha pergunta claramente feita, por favor.

À luz do segmento em evolução, atualizei o seguinte:

IE 6

* html .ie6 {property:value;}

ou

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

ou

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

IE 6 e 7

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

ou

.ie67 { *property:value;}

ou

.ie67 { #property:value;}

IE 6, 7 e 8

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

IE 8

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

ou

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

Modo padrão do IE 8 apenas

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

IE 8,9 e 10

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

Apenas IE 9

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

IE 9 e superior

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

IE 9 e 10

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

Apenas IE 10

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

IE 10 e superior

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

ou

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

O uso de -ms-high-contrastsignifica que o MS Edge não será o alvo, pois o Edge não oferece suporte-ms-high-contrast .

IE 11

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

Alternativas de Javascript

Modernizr

Modernizr é executado rapidamente no carregamento da página para detectar recursos; em seguida, ele cria um objeto JavaScript com os resultados e adiciona classes ao elemento html

Seleção de agente de usuário

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

Adiciona (por exemplo) o seguinte ao 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'

Permitindo seletores CSS muito direcionados, por exemplo:

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

Nota de rodapé

Se possível, identifique e corrija quaisquer problemas sem hacks. Suporta aprimoramento progressivo e degradação elegante . No entanto, este é um cenário de 'mundo ideal' nem sempre possível, como tal - o acima deve ajudar a fornecer algumas boas opções.

Atribuição / leitura essencial

• Jeff Clayton | Browserhacks.com
• Keith Clarke
• Paul irlandês
• Web Devout
• The Spanner

Para direcionar apenas o IE10 e o IE11 (e não o Edge):

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

Então, no final, encontrei minha própria solução para esse problema.

Depois de pesquisar na documentação da Microsoft consegui encontrar um novo estilo apenas do IE11msTextCombineHorizontal

Em meu teste, eu verifico se há estilos do IE10 e, se eles forem uma correspondência positiva, verifico apenas o estilo IE11. Se eu encontrar, é o IE11 +; se não, é o IE10.

Exemplo de código: detectar IE10 e IE11 por teste de capacidade 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>

Vou atualizar o exemplo de código com mais estilos quando os descobrir.

NOTA: Isso quase certamente identificará o IE12 e o IE13 como "IE11", pois esses estilos provavelmente continuarão. Adicionarei mais testes à medida que novas versões forem lançadas e, com sorte, poderei confiar novamente na Modernizr.

Estou usando este teste para comportamento de fallback. O comportamento substituto é apenas um estilo menos glamoroso, não tem funcionalidade reduzida.

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

Aqui está uma resposta para 2017 em, onde provavelmente você só se preocupa em distinguir <= IE11 de> IE11 ("Edge"):

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

Exemplo mais demonstrativo:

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

Isso funciona porque o IE11 nem mesmo oferece suporte @supports, e todas as outras combinações de navegador / versão relevantes o fazem.

Você pode escrever seu código do IE11 normalmente e, em seguida, usar @supportse verificar se há uma propriedade que não é compatível com o IE11, por exemplogrid-area: auto .

Você pode então escrever seus estilos modernos de navegador dentro dele. O IE não suporta a @supportsregra e usará os estilos originais, ao passo que estes serão substituídos nos navegadores modernos que suportam @supports.

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

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

Isso funcionou para mim

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

E então, no arquivo css, as coisas prefixadas com

body.ie11 #some-other-div

Quando este navegador está pronto para morrer?

Experimente isto:

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

Dê uma olhada neste artigo: CSS: Seletores de agente de usuário

Basicamente, quando você 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':'');

Agora você pode usar CSS para direcionar qualquer navegador / versão.

Portanto, para o IE11, podemos fazer isso:

FIDDLE

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

Use as seguintes propriedades:

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

Você deve usar o Modernizr, ele adicionará uma classe à tag do corpo.

Além disso:

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

Observe que o IE11 ainda está em visualização e o agente do usuário pode mudar antes do lançamento.

A string do agente do usuário para o IE 11 atualmente é esta:

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

O que significa que você pode simplesmente testar, para as versões 11.xx,

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

Talvez o Layout Engine v0.7.0 seja uma boa solução para sua situação. Ele usa a detecção de recursos do navegador e pode detectar não apenas IE11 e IE10, mas também IE9, IE8 e IE7. Ele também detecta outros navegadores populares, incluindo alguns navegadores móveis. Ele adiciona uma classe à tag html, é fácil de usar e tem um bom desempenho em alguns testes bastante profundos.

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

Se você estiver usando o Modernizr , você poderá diferenciar facilmente entre o IE10 e o IE11.

O IE10 não oferece suporte à pointer-eventspropriedade. IE11 sim. ( caniuse )

Agora, com base na classe que o Modernizr insere, você pode ter o seguinte CSS:

.class
{ 
   /* for IE11 */
}

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

Você pode usar js e adicionar uma classe em html para manter o padrão de comentários condicionais :

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

Ou use uma biblioteca como o bowser:

https://github.com/ded/bowser

Ou modernizr para detecção de recursos:

http://modernizr.com/

Detectar o IE e suas versões é extremamente fácil, pelo menos extremamente 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;
}

.

Dessa forma, você também pegará versões altas do IE no Modo / Visualização de Compatibilidade. Em seguida, é uma questão de atribuir classes condicionais:

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

Você pode tentar isto:

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

Encontrei o mesmo problema com um Gravity Form (WordPress) no IE11. O estilo de coluna do formulário "display: inline-grid" quebrou o layout; aplicar as respostas acima resolveu a discrepância!

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

Dê um passo para trás: por que você está tentando detectar "internet explorer" em vez de "meu site precisa fazer X, este navegador oferece suporte a esse recurso? Se sim, bom navegador. Se não, devo alertar o usuário".

Você deve acessar http://modernizr.com/ em vez de continuar o que está fazendo.