Détection d'IE11 à l'aide de la détection des capacités / fonctionnalités CSS

IE10 + ne prend plus en charge les balises de détection de navigateur pour identifier un navigateur.

Pour détecter IE10, j'utilise JavaScript et une technique de test de capacité pour détecter certains msstyles préfixés est définie comme msTouchActionet msWrapFlow.

Je veux faire la même chose pour IE11, mais je suppose que tous les styles IE10 seront également pris en charge dans IE11. Quelqu'un peut-il m'aider à identifier uniquement les styles ou fonctionnalités IE11 que je pourrais utiliser pour distinguer les deux?

Informaitons supplémentaires

• Je ne veux pas utiliser la détection de type d'agent utilisateur car elle est si inégale et peut être modifiée, et je pense avoir lu que IE11 essaie intentionnellement de cacher le fait qu'il s'agit d'Internet Explorer.
• Pour un exemple du fonctionnement des tests de capacité IE10, j'ai utilisé ce JsFiddle (pas le mien) comme base pour mes tests.
• J'attends aussi beaucoup de réponses de "C'est une mauvaise idée ...". L'un de mes besoins à cet égard est qu'IE10 affirme qu'il prend en charge quelque chose, mais il est très mal implémenté, et je veux pouvoir faire la différence entre IE10 et IE11 + afin de pouvoir passer à une méthode de détection basée sur les capacités à l'avenir.
• Ce test est couplé à un test Modernizr qui fera simplement "repli" de certaines fonctionnalités vers un comportement moins glamour. Nous ne parlons pas de fonctionnalité critique.

AUSSI J'utilise déjà Modernizr, mais cela n'aide pas ici. J'ai besoin d'aide pour trouver une solution à ma question clairement posée.

À la lumière de l'évolution du fil, j'ai mis à jour ce qui suit:

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

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

ou

.ie67 { *property:value;}

ou

.ie67 { #property:value;}

IE 6, 7 et 8

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

IE 8

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

ou

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

Mode standard IE 8 uniquement

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

IE 8,9 et 10

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

IE 9 uniquement

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

IE 9 et supérieur

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

IE 9 et 10

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

IE 10 uniquement

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

IE 10 et supérieur

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

ou

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

L'utilisation de -ms-high-contrastsignifie que MS Edge ne sera pas ciblé, car Edge ne le prend pas en charge-ms-high-contrast .

IE 11

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

Alternatives Javascript

Moderniser

Modernizr s'exécute rapidement au chargement de la page pour détecter les fonctionnalités; il crée ensuite un objet JavaScript avec les résultats et ajoute des classes à l'élément html

Sélection de l'agent utilisateur

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

Ajoute (par exemple) ce qui suit à l' htmlélément:

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'

Permettre des sélecteurs CSS très ciblés, par exemple:

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

note de bas de page

Si possible, identifiez et corrigez tout problème sans piratage. Soutenir l'amélioration progressive et la dégradation gracieuse . Cependant, il s'agit d'un scénario de «monde idéal» qui n'est pas toujours réalisable, en tant que tel - ce qui précède devrait aider à fournir de bonnes options.

Attribution / Lecture essentielle

• Jeff Clayton | Browserhacks.com
• Keith Clarke
• Paul irlandais
• Web Devout
• La clé

Pour cibler IE10 et IE11 uniquement (et non Edge):

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

J'ai donc trouvé ma propre solution à ce problème à la fin.

Après avoir parcouru la documentation Microsoft j'ai réussi à trouver un nouveau style IE11 uniquementmsTextCombineHorizontal

Dans mon test, je vérifie les styles IE10 et s'ils correspondent à une correspondance positive, je vérifie le style IE11 uniquement. Si je le trouve, alors c'est IE11 +, sinon, c'est IE10.

Exemple de code: Détecter IE10 et IE11 par 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>

Je mettrai à jour l'exemple de code avec plus de styles lorsque je les découvrirai.

REMARQUE: Cela identifiera presque certainement IE12 et IE13 comme "IE11", car ces styles seront probablement conservés. J'ajouterai d'autres tests au fur et à mesure du déploiement de nouvelles versions, et j'espère pouvoir à nouveau compter sur Modernizr.

J'utilise ce test pour le comportement de secours. Le comportement de secours est juste un style moins glamour, il n'a pas de fonctionnalités réduites.

Cela semble fonctionner:

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

Vous pouvez écrire votre code IE11 normalement, puis utiliser @supportset rechercher une propriété qui n'est pas prise en charge dans IE11, par exemple grid-area: auto.

Vous pouvez ensuite écrire vos styles de navigateur modernes dans ce cadre. IE ne prend pas en charge la @supportsrègle et utilisera les styles d'origine, alors que ceux-ci seront remplacés dans les navigateurs modernes qui prennent en charge @supports.

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

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

Voici une réponse pour 2017 sur, où vous ne vous souciez probablement que de distinguer <= IE11 de> IE11 ("Edge"):

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

Exemple plus démonstratif:

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

Cela fonctionne car IE11 ne prend même pas en charge @supports, et toutes les autres combinaisons navigateur / version pertinentes le font.

Cela a fonctionné pour moi

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

Et puis dans le fichier css, les choses préfixées par

body.ie11 #some-other-div

Quand ce navigateur est-il prêt à mourir?

Essaye ça:

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

Jetez un œil à cet article: CSS: Sélecteurs d'agents utilisateurs

En gros, lorsque vous utilisez ce 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':'');

Vous pouvez maintenant utiliser CSS pour cibler n'importe quel navigateur / version.

Donc, pour IE11, nous pourrions faire ceci:

VIOLON

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

Utilisez les propriétés suivantes:

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

Vous devez utiliser Modernizr, il ajoutera une classe à la balise body.

aussi:

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

Notez que IE11 est toujours en préversion et que l'agent utilisateur peut changer avant la publication.

La chaîne User-agent pour IE 11 est actuellement celle-ci:

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

Ce qui signifie que vous pouvez simplement tester, pour les versions 11.xx,

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

Peut-être que Layout Engine v0.7.0 est une bonne solution pour votre situation. Il utilise la détection des fonctionnalités du navigateur et peut détecter non seulement IE11 et IE10, mais également IE9, IE8 et IE7. Il détecte également d'autres navigateurs populaires, y compris certains navigateurs mobiles. Il ajoute une classe à la balise html, est facile à utiliser et fonctionne bien sous des tests assez approfondis.

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

Si vous utilisez Modernizr , vous pouvez facilement faire la différence entre IE10 et IE11.

IE10 ne prend pas en charge la pointer-eventspropriété. IE11 le fait. ( caniuse )

Maintenant, en fonction de la classe insérée par Modernizr, vous pouvez avoir le CSS suivant:

.class
{ 
   /* for IE11 */
}

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

Vous pouvez utiliser js et ajouter une classe en html pour maintenir le standard des commentaires conditionnels :

  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 utilisez une lib comme bowser:

https://github.com/ded/bowser

Ou modernizr pour la détection des fonctionnalités:

http://modernizr.com/

Détecter IE et ses versions est en fait extrêmement simple, du moins extrêmement intuitif:

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 cette façon, vous attrapez également des versions IE élevées en mode de compatibilité / vue. Ensuite, il s'agit d'attribuer des classes conditionnelles:

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

Vous pouvez essayer ceci:

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

J'ai rencontré le même problème avec un Gravity Form (WordPress) dans IE11. Le style de colonne du formulaire "display: inline-grid" a cassé la mise en page; l'application des réponses ci-dessus a résolu l'écart!

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

Reculez: pourquoi essayez-vous même de détecter "Internet Explorer" plutôt que "mon site Web doit faire X, ce navigateur prend-il en charge cette fonctionnalité? Si oui, bon navigateur. Sinon, je devrais avertir l'utilisateur".

Vous devriez aller sur http://modernizr.com/ au lieu de continuer ce que vous faites.