web-dev-qa-db-fra.com

Détection d'IE11 à l'aide de la détection de capacité/fonctionnalité 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 des capacités permettant de détecter certains styles préfixés par ms est définie, tels que 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. Quelqu'un peut-il m'aider à identifier uniquement les styles ou les fonctionnalités d'IE11 que je pourrais utiliser pour différencier les deux?

Informaitons supplémentaires

  • Je ne souhaite pas utiliser la détection de type Agent utilisateur, car elle est très inégale et peut être modifiée, de même que je pense avoir déjà lu qu'IE11 tente intentionnellement de masquer le fait qu'il s'agit d'Internet Explorer.
  • Pour un exemple du fonctionnement des tests de capacité IE10, j’ai utilisé ceci JsFiddle (pas le mien) comme base pour mes tests.
  • J'attends aussi beaucoup de réponses de "C'est une mauvaise idée ...". Un de mes besoins, c’est que IE10 affirme soutenir quelque chose, mais il est très mal implémenté et je veux pouvoir faire la différence entre IE10 et IE11 + pour pouvoir continuer à utiliser une méthode de détection basée sur les capacités.
  • Ce test est associé à un test Modernizr qui fera simplement en sorte que certaines fonctionnalités "se replient" sur 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 une solution à ma question clairement posée s'il vous plaît.

internet-explorer-11samplefeature-detection
65
Evildonald

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

Après une recherche dans documentation Microsoft j’ai réussi à trouver un nouveau style IE11 uniquement msTextCombineHorizontal

Lors de mon test, je recherche les styles IE10 et s’ils correspondent, je vérifie uniquement le style IE11. Si je le trouve, alors c'est IE11 +, sinon, c'est IE10.

Exemple de code:Détecter IE10 et IE11 par le test de capacité CSS (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.

NOTE: Ceci identifiera presque certainement IE12 et IE13 comme "IE11", car ces styles seront probablement reportés. J'ajouterai d'autres tests au fur et à mesure du déploiement des nouvelles versions, et j'espère pouvoir à nouveau faire confiance à Modernizr.

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

23
Evildonald

À la lumière de l'évolution du fil, j'ai mis à jour le ci-dessous:

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

IE 8 en mode standard uniquement

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

IE 8,9 et 10

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

IE 9 seulement

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

IE 9 et plus

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

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

IE 10 et plus

_:-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-contrast signifie que MS Edge ne sera pas ciblé, car Edge ne supporte pas -ms-high-contrast .

IE 11

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

Alternatives javascript

Modernisation

Modernizr s'exécute rapidement au chargement de la page pour détecter les fonctionnalités; alors crée un objet JavaScript avec les résultats et ajoute des classes au fichier é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) l'élément ci-dessous à 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'

Autoriser 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 le (s) problème (s) sans piratage. Support amélioration progressive et dégradation progressive . Cependant, il s’agit d’un scénario «monde idéal» qui n’est pas toujours réalisable, de sorte que ce qui précède devrait permettre de proposer de bonnes options.

Attribution/Lecture essentielle

130
SW4
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  

}

ajoutez toutes vos classes ou propriétés CSS.

18
Apps Tawale

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/

14
geoff

Vous pouvez écrire votre code IE11 normalement, puis utiliser @supports et rechercher une propriété non prise en charge dans IE11, par exemple grid-area: auto. 

Vous pouvez ensuite écrire vos styles de navigateur modernes dans ce domaine. IE ne prend pas en charge la règle @supports et utilisera les styles d'origine, alors qu'ils seront remplacés par les navigateurs modernes prenant 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;
    }
}
5
Antfish

Essaye ça:

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

Voici une réponse pour 2017, où vous ne voulez probablement que 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 do.

3
Jan Kyu Peblik

Cela a fonctionné pour moi

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

Et puis, dans le fichier CSS, les éléments précédés de

body.ie11 #some-other-div

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

3
Bert Oost

Jetez un oeil à cet article: CSS: User Agent Selectors

En gros, quand 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;
}
3
Danield

Vous pouvez essayer ceci:

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

Vous pouvez utiliser js et ajouter une classe au format HTML pour conserver la norme de 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 de fonctionnalité: 

http://modernizr.com/

2
Liko

Détecter IE et ses versions est en fait extrêmement facile, 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 élevées IE en mode de compatibilité/vue. Ensuite, il s’agit d’affecter des classes conditionnelles: 

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

Vous devriez utiliser Modernizr, cela ajoutera une classe à la balise body.

également:

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 qu'IE11 est toujours en aperçu et que l'agent utilisateur peut changer avant la publication.

La chaîne d'agent d'utilisateur 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\./)
2
Neo

Utilisez les propriétés suivantes:

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

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

2
Talkingrock

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

IE10 ne prend pas en charge la propriété pointer-events. IE11 fait. ( puis-je utiliser )

Maintenant, en fonction de la classe dans laquelle Modernizr insère, vous pouvez avoir le code CSS suivant:

.class
{ 
   /* for IE11 */
}

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

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 rompu la présentation; appliquer les réponses ci-dessus a résolu le problème!

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

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 tel est le cas, bon navigateur. Sinon, je devrais avertir l'utilisateur".

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

0
Mike 'Pomax' Kamermans