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

90

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.

Dano
la source
3
Pourquoi avez-vous besoin de savoir de quel navigateur l'utilisateur dispose? La détection de fonctionnalités / les préfixes css / les conditions css ne sont-ils pas suffisants?
David-SkyMesh
4
J'ai oublié de mentionner que nous avons nos raisons de devoir détecter les navigateurs, que les tests de capacités n'aident pas. L'un de nos problèmes est que IE10 dit qu'il prend en charge quelque chose, mais ne le fait pas très bien.
dano le
2
@ David-SkyMesh - Non, ce n'est malheureusement pas suffisant. J'aimerais que ce soit le cas, mais ce n'est pas le cas.
dano le
1
@Evildonald Vous n'avez pas répondu pourquoi vous avez besoin de savoir - en particulier. Il se pourrait bien que ce soit un problème XY. (c'est-à-dire: vous demandez à utiliser pour aider avec X - détecter IE11 - quand nous pourrions répondre à une autre question Y - comment être compatible avec plus de navigateurs, y compris IE11 pour TASK Z)
David-SkyMesh
1
J'avais un .js qui détecte les versions de navigateur, et il disait que ie11 était un Firefox. ce qui se passe, c'est à dire les développeurs!
Daniel Cheung

Réponses:

163

À 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

SW4
la source
3
Cela devrait vraiment être la réponse. Grand détail!
egr103 du
Le IE10 seulement ne fonctionne pas pour moi. La barre oblique inverse-9 ne supprime pas IE11. J'essaie de montrer un div pour IE 10 mais pas pour IE11 ... Il apparaît toujours sur IE 11 ...
Merc
Ah bizarre. Il fonctionne sur la plupart des propriétés mais clip: auto\9;est toujours interprété comme clip: auto;dans IE 11. D'une manière ou d'une autre, cela n'est pas ignoré ...
Merc
2
Pour moi, la deuxième option IE10 a fonctionné pour IE11: @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .relevant_selectors_for_situation {property:value;} }je l'ai trouvée dans mediacurrent.com/blog
...
1
Après avoir lu tout cela, je pense que cela -ms-high-contrast: activepourrait être quelque chose à éviter car, selon les spécifications MS, vous ciblerez en fait les utilisateurs de thèmes à contraste élevé dans Edge avec vos règles IE 10/11. Dans la page, cette réponse renvoie à ce -ms-high-contrastqui indique en fait que seule la -ms-high-contrast: nonevaleur n'est plus prise en charge. Je pense que personne ne le mentionne car la plupart des gens n'ont pas activé le mode de contraste élevé et la plupart des gens n'utilisent pas Edge. Mais quand même, il y a quelqu'un qui a cette configuration et ce n'est probablement pas cool pour eux.
dmatamales
40

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 */   
}
Applications Tawale
la source
1
Quelque chose comme ça pourrait être un mixin sass aussi!
dano le
2
Est-ce que cela cible IE11 uniquement ou Edge aussi?
Matthew Felgate du
2
Cible IE10 et IE11 mais pas Edge.
Jeff Clayton
23

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)

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.

Dano
la source
8
Si quelqu'un veut -1 cette réponse, veuillez au moins avoir la décence de l'admettre avec une raison technique . Vous pouvez être en désaccord avec cela ... mais c'est correct et cela fonctionne.
dano
7
Comment savoir si ce code produira des résultats corrects dans IE12, IE13 et ainsi de suite?
Evgeny
6
Pourquoi utilisez-vous cette méthode au lieu de if (document.documentMode === 11) { ... }? À moins, bien sûr, que vous souhaitiez utiliser la propriété CSS dans une @supportsrègle at (qui n'est pas encore prise en charge dans IE, d'ailleurs).
Rob W
1
Si vous avez des classes existantes dans votre balise body, cela les écrasera. Voici la solution très mineure: jsfiddle.net/jmjpro/njvr1jq2/1 .
jbustamovej
1
De plus, vous allez vouloir masquer l'élément ieVersion avec css: #ieVersion {display: none}
jbustamovej
19

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/

Geoff
la source
Celui-ci ne fait pas la différence entre ie10 et ie11 mais si cela ne vous dérange pas de détecter également ie10, alors vous êtes bon avec celui-ci.
Jeff Clayton
9

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;
    }
}
Antfish
la source
2
Cela fonctionne et est une bonne solution, mais le raisonnement donné n'est pas correct. IE11 ne prend pas @supportsdu tout en charge, donc il ignore tout ce qui se trouve dans le @supportsbloc. Vous pouvez donc mettre n'importe quoi dans le conditionnel @supports (par exemple @supports (display: block)) et IE11 le sautera toujours.
CodeBiker
1
C'est ce que je voulais dire par "IE 11 ignorera" mais vous avez raison, ce n'est pas tout à fait clair. J'ai mis à jour la réponse pour être plus clair que IE ne prend pas en charge @supports.
Antfish
9

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.

Jan Kyu Peblik
la source
4

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?

Bert Oost
la source
4

Essaye ça:

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

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;
}
Danield
la source
1
Cela casserait dans Firefox 11 (même s'il n'est pas pris en charge maintenant, c'est important). Il a également rv:11.0dans sa chaîne d'agent utilisateur.
PhistucK
3

Utilisez les propriétés suivantes:

  • !! window.MSInputMethodContext
  • !! document.msFullscreenEnabled
Paul Sweatte
la source
2

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\./)
Néo
la source
Merci Neo, mais j'ajoute déjà une classe à ma balise corporelle ET j'utilise Modernizr. Je cherche un moyen de différencier IE10 d'IE11 sans utiliser l'agent utilisateur qui n'est pas digne de confiance.
dano le
Il manque les deux points dans rv 11. var isIE11 = !! navigator.userAgent.match (/Trident.*rv:11 \ ./)
T.CK
2

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

Talkingrock
la source
2

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 */
}
Danield
la source
2

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/

Liko
la source
2

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-';
Frank Conijn
la source
2

Vous pouvez essayer ceci:

if(document.documentMode) {
  document.documentElement.className+=' ie'+document.documentMode;
}
Adrian Miranda
la source
2

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 */
}
leonel.ai
la source
1

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.

Mike 'Pomax' Kamermans
la source
Merci pour une solution alternative, mais j'utilise déjà Modernizr et IE10 représente mal ses capacités.
dano le
4
Je suppose que vous savez lesquels et que vous avez déposé un problème avec Modernizr afin qu'ils puissent ajouter plus de vérifications Modernizrs pour ce navigateur particulier? (Sinon, vous devriez. Si vous trouvez quelque chose qui affecte des centaines de milliers de développeurs, le déposer auprès des personnes responsables de la cale est la seule bonne chose à faire)
Mike 'Pomax' Kamermans
7
Pour ceux d'entre nous qui écrivent du code destiné à l'utilisateur, vous avez souvent besoin d'une réponse maintenant , pas d'un bogue déposé dans une bibliothèque tierce et d'un correctif. C'est-à-dire que c'est bien que vous vouliez qu'ils améliorent Modernizr, mais ce n'est pas une solution ici.
Dean J
1
Je pense que détecter le vrai navigateur est un objectif raisonnable en soi.
gwg
@DeanJ bien sûr, et pour ces questions, quelqu'un d'autre fournira également une réponse. Cela ne rend pas moins important d'obtenir des réponses comme celles-ci qui vous disent de réfléchir à ce que vous faites. En outre, au moment de la réponse, il n'y avait pas de modifications au message, et il n'y avait aucune mention de "j'en ai besoin pour fonctionner maintenant", donc je n'avais aucune raison de supposer qu'ils ne voulaient pas de vérification de la réalité.
Mike 'Pomax' Kamermans