Rilevamento di IE11 utilizzando CSS Capability / Feature Detection

IE10 + non supporta più i tag di rilevamento del browser per identificare un browser.

Per rilevare IE10 sto usando JavaScript e una tecnica di test di capacità per rilevare determinati msstili con prefisso sono definiti come msTouchActione msWrapFlow.

Voglio fare lo stesso per IE11, ma presumo che tutti gli stili di IE10 saranno supportati anche in IE11. Qualcuno può aiutarmi a identificare solo gli stili o le capacità di IE11 che potrei usare per distinguere i due?

Informazioni extra

• Non voglio utilizzare il rilevamento del tipo di agente utente perché è così irregolare e può essere modificato, così come penso di aver letto che IE11 sta intenzionalmente cercando di nascondere il fatto che sia Internet Explorer.
• Per un esempio di come funziona il test di capacità di IE10, ho usato questo JsFiddle (non il mio) come base per i miei test.
• Inoltre mi aspetto molte risposte di "Questa è una cattiva idea ...". Uno dei miei bisogni è che IE10 affermi di supportare qualcosa, ma è implementato molto male e voglio essere in grado di distinguere tra IE10 e IE11 + in modo da poter andare avanti con un metodo di rilevamento basato sulle capacità in futuro.
• Questo test è abbinato a un test Modernizr che semplicemente renderà alcune funzionalità "di riserva" a comportamenti meno affascinanti. Non stiamo parlando di funzionalità critiche.

INOLTRE sto già usando Modernizr, ma qui non aiuta. Ho bisogno di aiuto per una soluzione alla mia domanda chiaramente posta per favore.

Alla luce del thread in evoluzione, ho aggiornato quanto segue:

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 e 7

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

o

.ie67 { *property:value;}

o

.ie67 { #property:value;}

IE 6, 7 e 8

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

IE 8

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

o

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

Solo modalità IE 8 Standards

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

IE 8,9 e 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 e versioni successive

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

Solo IE 10

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

IE 10 e versioni successive

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

o

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

L'uso di -ms-high-contrastsignifica che MS Edge non sarà preso di mira, poiché Edge non supporta-ms-high-contrast .

IE 11

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

Alternative Javascript

Modernizr

Modernizr viene eseguito rapidamente al caricamento della pagina per rilevare le funzionalità; quindi crea un oggetto JavaScript con i risultati e aggiunge classi all'elemento html

Selezione agente utente

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

Aggiunge (ad esempio) il seguente htmlall'elemento:

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'

Consentire selettori CSS molto mirati, ad esempio:

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

Nota

Se possibile, identifica e risolvi eventuali problemi senza hack. Supporta il miglioramento progressivo e il degrado grazioso . Tuttavia, questo è uno scenario di "mondo ideale" non sempre ottenibile, in quanto tale, quanto sopra dovrebbe aiutare a fornire alcune buone opzioni.

Attribuzione / Lettura essenziale

• Jeff Clayton | Browserhacks.com
• Keith Clarke
• Paul Irish
• Web Devout
• The Spanner

Per scegliere come target solo IE10 e IE11 (e non Edge):

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

Quindi alla fine ho trovato la mia soluzione a questo problema.

Dopo aver cercato nella documentazione Microsoft sono riuscito a trovare un nuovo stile unico per IE11msTextCombineHorizontal

Nel mio test, controllo gli stili IE10 e se sono una corrispondenza positiva, allora cerco solo lo stile IE11. Se lo trovo, allora è IE11 +, se non lo trovo, allora è IE10.

Esempio di codice: rilevamento di IE10 e IE11 tramite 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>

Aggiornerò l'esempio di codice con più stili quando li scoprirò.

NOTA: Questo quasi certamente identificherà IE12 e IE13 come "IE11", poiché questi stili probabilmente continueranno. Aggiungerò ulteriori test man mano che verranno lanciate nuove versioni e, si spera, potrò fare di nuovo affidamento su Modernizr.

Sto usando questo test per il comportamento di fallback. Il comportamento di riserva è solo uno stile meno affascinante, non ha funzionalità ridotte.

Questo sembra funzionare:

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

È possibile scrivere il codice IE11 normalmente e quindi utilizzare @supportse verificare una proprietà che non è supportata in IE11, ad esempio grid-area: auto.

Puoi quindi scrivere i tuoi stili di browser moderni all'interno di questo. IE non supporta la @supportsregola e utilizzerà gli stili originali, mentre questi verranno sovrascritti nei browser moderni che supportano @supports.

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

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

Ecco una risposta per il 2017 in poi, dove probabilmente ti interessa solo distinguere <= IE11 da> IE11 ("Edge"):

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

Esempio più dimostrativo:

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

Questo funziona perché IE11 in realtà non supporta nemmeno @supports, e tutte le altre combinazioni browser / versione pertinenti lo fanno.

Questo ha funzionato per me

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

E poi nel file css le cose con prefisso

body.ie11 #some-other-div

Quando sarà pronto questo browser?

Prova questo:

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

Dai un'occhiata a questo articolo: CSS: selettori dell'agente utente

Fondamentalmente, quando usi questo 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':'');

Ora puoi utilizzare CSS per scegliere come target qualsiasi browser / versione.

Quindi per IE11 potremmo fare questo:

VIOLINO

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

Usa le seguenti proprietà:

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

Dovresti usare Modernizr, aggiungerà una classe al tag body.

anche:

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

Nota che IE11 è ancora in anteprima e l'agente utente potrebbe cambiare prima del rilascio.

La stringa User-agent per IE 11 è attualmente questa:

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

Ciò significa che puoi semplicemente testare, per le versioni 11.xx,

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

Forse Layout Engine v0.7.0 è una buona soluzione per la tua situazione. Utilizza il rilevamento delle funzionalità del browser e può rilevare non solo IE11 e IE10, ma anche IE9, IE8 e IE7. Rileva anche altri browser popolari, inclusi alcuni browser mobili. Aggiunge una classe al tag html, è facile da usare e viene eseguito bene in alcuni test abbastanza approfonditi.

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

Se stai usando Modernizr , puoi facilmente distinguere tra IE10 e IE11.

IE10 non supporta la pointer-eventsproprietà. IE11 lo fa. ( caniuse )

Ora, in base alla classe che Modernizr inserisce, potresti avere il seguente CSS:

.class
{ 
   /* for IE11 */
}

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

Puoi usare js e aggiungere una classe in html per mantenere lo standard dei commenti condizionali :

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

Oppure usa una libreria come bowser:

https://github.com/ded/bowser

O modernizr per il rilevamento delle funzionalità:

http://modernizr.com/

Rilevare IE e le sue versioni in realtà è estremamente facile, almeno estremamente 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;
}

.

In questo modo, stai anche catturando versioni di IE alte in modalità di compatibilità / visualizzazione. Successivamente, è questione di assegnare classi condizionali:

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

Puoi provare questo:

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

Ho riscontrato lo stesso problema con un Gravity Form (WordPress) in IE11. Lo stile di colonna del modulo "display: inline-grid" ha interrotto il layout; l'applicazione delle risposte sopra ha risolto la discrepanza!

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

Fai un passo indietro: perché stai anche cercando di rilevare "Internet Explorer" anziché "il mio sito web deve fare X, questo browser supporta questa funzione? Se è così, buon browser. In caso contrario, dovrei avvertire l'utente".

Dovresti fare clic su http://modernizr.com/ invece di continuare quello che stai facendo.