Détection de L'IE11 à L'aide de la capacité CSS/détection de caractéristiques

à la lumière du fil évolutif, 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 {
    .ie67 {property:value;}
}

ou

.ie67 { *property:value;}

ou

.ie67 { #property:value;}

IE 6, 7 et 8

@media "151970920"screen\,screen {
    .ie678 {property:value;}
}

IE 8

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

ou

@media "151990920"screen {
    .ie8 {property:value;}
}

IE 8 Mode Standard seulement

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

IE 8,9 et 10

@media screen"1519110920" {
    .ie8910 {property:value;}
}

IE 9 seulement

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

IE 9 et plus

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

IE 9 et 10

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

IE 10 only

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

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ée, car Edge ne supporte pas -ms-high-contrast .

IE 11

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

---

alternatives Javascript

Modernizr

Modernizr fonctionne rapidement sur le chargement de la page à détecter les caractéristiques; il alors crée un objet JavaScript avec les résultats, et ajoute des classes é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':'');

Adds(E. g) l'élément html ci-dessous:

"

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, p.ex.:

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 problème sans piratage. Support amélioration progressive et dégradation gracieuse . Cependant, il s'agit d'un "monde idéal" scénario 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 Irish
• "15191250920 Web" Pieuse
• La Clé

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

}

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

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 comme normal, puis utiliser @supports et vérifier une propriété qui n'est pas prise en charge dans IE11, par exemple grid-area: auto .

vous pouvez alors écrire vos styles de navigateur modernes dans ce. IE ignorera la règle @supports et utilisera les styles originaux, alors que ceux-ci seront dépassés dans les navigateurs modernes.

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

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

cela a fonctionné pour moi

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

et ensuite dans le fichier css les choses préfixées par

body.ie11 #some-other-div

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

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

essayez ceci:

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

Voici une réponse pour 2017, 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 parce que IE11 ne supporte même pas réellement @supports , et toutes les autres combinaisons navigateur/version pertinentes font.

il est également probable que certains -ms-foo propriété exclusive qui IE11 pris en charge mais >IE11 doesn't support existe également, auquel cas vous pouvez utiliser @supports (--what: evr) { } pour cibler directement IE11 seul à la place en utilisant le contrôleur susmentionné.

vous devez utiliser Modernizr, il va ajouter une classe à l'étiquette du corps.

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. );
  }
  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. );
  }
  return rv;
}

notez que IE11 est toujours en preview, 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 Layout Engine v0.7.0 est une bonne solution pour votre situation. Il utilise la détection de fonctionnalité de navigateur et peut détecter non seulement IE11 et IE10, mais aussi IE9, IE8, et IE7. Il détecte également les autres navigateurs populaires, y compris certains navigateurs mobiles. Il ajoute une classe à la balise html, est facile à utiliser, et il est bien exécuté sous certains tests assez profonds.

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

si vous utilisez Modernizr - alors vous pouvez facilement différencier entre IE10 et IE11.

IE10 ne supporte pas la propriété pointer-events . IE11. ( caniuse )

maintenant, basé sur la classe que Modernizr insère vous pourriez avoir les CSS suivants:

.class
{ 
   /* for IE11 */
}

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

vous pouvez utiliser js et ajouter une classe en html pour maintenir 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 utiliser une lib comme bowser:

https://github.com/ded/bowser

Ou modernizr pour la détection de la fonctionnalité:

http://modernizr.com /

utiliser les propriétés suivantes:

• !!fenêtre.Msinputmethodcontexte
• !!document.msFullscreenEnabled

détecter IE et ses versions est en fait extrêmement facile, au 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 aussi des versions hautes IE 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;
}

prendre du recul: pourquoi essayez-vous même de détecter "internet explorer" plutôt que "mon site Web doit faire X, est-ce que ce navigateur supporte cette fonctionnalité? Si oui, un bon navigateur. Si non, alors je doit avertir l'utilisateur".

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