Détection de la version d'IE en utilisant la détection de la capacité / fonctionnalité CSS

Question

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

Pour détecter IE10, j'utilise JavaScript et une technique de test des capacités pour détecter si certains styles préfixés ms sont définis comme msTouchAction et 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. Est-ce que quelqu'un peut m'aider à identifier des styles ou des capacités propres à IE11 que je pourrais utiliser pour les distinguer?

Informations supplémentaires

• Je ne veux pas utiliser la détection de type User Agent car c'est très aléatoire et peut être modifié, en plus j'ai lu que IE11 essaie intentionnellement de cacher le fait qu'il s'agit d'Internet Explorer.
• Pour un exemple du fonctionnement du test des capacités IE10, j'ai utilisé ce JsFiddle (pas le mien) comme base pour mes tests.
• Aussi, je m'attends à beaucoup de réponses du type "C'est une mauvaise idée...". L'une de mes raisons pour cela est qu'IE10 prétend prendre en charge quelque chose, mais c'est très mal implémenté, et je veux pouvoir différencier IE10 de IE11+ pour pouvoir passer à une méthode de détection basée sur les capacités à l'avenir.
• Ce test est associé à un test de Modernizr qui fera simplement en sorte que certaines fonctionnalités se "replient" vers un comportement moins glamour. Nous ne parlons pas de fonctionnalités critiques.

J'utilise déjà Modernizr, mais ça ne m'aide pas ici.

Answer 1

À la lumière de la menace évolutive, j'ai mis à jour ce qui suit :

IE 6

* html .ie6 {property:value;}

ou

.ie6 { _propriété:valeur;}

IE 7

*+html .ie7 {property:value;}

ou

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

IE 6 et 7

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

ou

.ie67 { *propriété:valeur;}

ou

.ie67 { #propriété:valeur;}

IE 6, 7 et 8

@media \0screen\,screen\9 {
    .ie678 {propriété:valeur;}
}

IE 8

html>/**/body .ie8 {propriété:valeur;}

ou

@media \0screen {
    .ie8 {propriété:valeur;}
}

Mode de compatibilité IE 8 uniquement

.ie8 { propriété /*\**/: valeur\9 }

IE 8,9 et 10

@media screen\0 {
    .ie8910 {propriété:valeur;}
}

IE 9 uniquement

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 // CSS IE9
 .ie9{propriété:valeur;}
}

IE 9 et plus récents

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

IE 9 et 10

@media screen and (min-width:0) {
    .ie910{propriété:valeur;}
}

IE 10 uniquement

_:-ms-lang(x), .ie10 { propriété:valeur\9; }

IE 10 et plus récents

_:-ms-lang(x), .ie10up { propriété:valeur; }

ou

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{propriété:valeur;}
}

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

IE 11

_:-ms-fullscreen, :root .ie11up { propriété:valeur; }

---

Alternatives JavaScript

Modernizr

Modernizr s'exécute rapidement lors du 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 d'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'élément 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'

Permettant 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, identifier et corriger tout(s) problème(s) sans piratage. Prendre en charge l'amélioration progressive et la dégradation gracieuse. Cependant, il s'agit d'un scénario d'un 'monde idéal' 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 Irish
• Web Devout
• The Spanner

Answer 2

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

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* ajoutez votre css pour IE10-IE11 ici */   
}

Answer 3

Alors j'ai finalement trouvé ma propre solution à ce problème.

Après avoir fouillé dans la documentation de Microsoft, j'ai réussi à trouver un nouveau style uniquement pour IE11: msTextCombineHorizontal

Dans mon test, je vérifie les styles de IE10 et s'ils correspondent positivement, puis je vérifie le style exclusif à IE11. Si je le trouve, alors c'est IE11+, sinon c'est IE10.

Exemple de code: Détection de IE10 et IE11 par test de capacité CSS (JSFiddle)

 /**
  Cibler IE 10 avec la détection des propriétés JavaScript et CSS.

  # 2013 par Tim Pietrusky
  # timpietrusky.com
 **/

 // Propriétés CSS uniquement pour IE 10
 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'];

 /*
  * Tester toutes les propriétés CSS uniquement pour IE
  */
 var d = document;
 var b = d.body;
 var s = b.style;
 var ieVersion = null;
 var property;

 // Tester les propriétés pour IE10
 for (var i = 0; i < ie10Styles.length; i++) {
     property = ie10Styles[i];

     if (s[property] != undefined) {
         ieVersion = "ie10";
         createEl("Style IE10 trouvé : " + property);
     }
 }

 // Tester les propriétés pour IE11
 for (var i = 0; i < ie11Styles.length; i++) {
     property = ie11Styles[i];

     if (s[property] != undefined) {
         ieVersion = "ie11";
         createEl("Style IE11 trouvé : " + property);
     }
 }

 if (ieVersion) {
     b.className = ieVersion;
     $('#versionId').html('Version : ' + ieVersion);
 } else {
     createEl('Pas IE10 ou 11.');
 }

 /*
  * Juste un petit aide pour créer un élément DOM
  */
 function createEl(content) {
     el = d.createElement('div');
     el.innerHTML = content;
     b.appendChild(el);
 }

 /*
  * Liste des trucs CSS IE :
  * 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;
}

Détection de IE10 et IE11 par test de capacité CSS

Je mettrai à jour l'exemple de code avec plus de styles quand 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 à mesure que de nouvelles versions seront publiées, et j'espère pouvoir à nouveau me fier à Modernizr.

J'utilise ce test pour le comportement de secours. Le comportement de secours ne concerne que le style moins glamour, il n'a pas de fonctionnalité réduite.

Answer 4

Cela semble fonctionner :

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* Styles spécifiques à IE10+ vont ici */  
}

https://www.limecanvas.com/css-hacks-for-targeting-ie-10-and-above/

Answer 5

Voici une réponse pour 2017 et au-delà, où vous vous souciez probablement uniquement 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 en charge en réalité même pas @supports, et toutes les autres combinaisons pertinentes de navigateurs / versions le font.