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

Vous pouvez écrire votre code IE11 normalement et ensuite utiliser @supports pour vérifier une propriété qui n'est pas prise en charge dans IE11, par exemple grid-area: auto.

Vous pouvez ensuite écrire vos styles pour les navigateurs modernes à l'intérieur de cela. IE ne prend pas en charge la règle @supports et utilisera les styles originaux, tandis que ceux-ci seront remplacés dans les navigateurs modernes qui prennent en charge @supports.

.my-class {
// IE aura un fond rouge
background: red;

   // Les navigateurs modernes auront un fond bleu
    @supports (grid-area: auto) {
      background: blue;
    }
}

Answer 2

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 avec

body.ie11 #some-other-div

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

Answer 3

Essayez ceci :

/*------Style spécifique pour IE11---------*/
_:-ms-fullscreen, :root
.legend
{
  line-height: 1.5em;
  position: relative;
  top: -1.1em;
}

Answer 4

Jetez un œil à cet article : CSS: Selecteurs de l'Agent Utilisateur

Fondamentalement, 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 du CSS pour cibler n'importe quel navigateur / version.

Donc pour IE11 nous pourrions faire ceci :

FIDDLE

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

Answer 5

Utilisez les propriétés suivantes:

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