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 ms
styles préfixés est définie 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. 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.
Réponses:
À la lumière de l'évolution du fil, j'ai mis à jour ce qui suit:
IE 6
ou
IE 7
ou
IE 6 et 7
ou
ou
IE 6, 7 et 8
IE 8
ou
Mode standard IE 8 uniquement
IE 8,9 et 10
IE 9 uniquement
IE 9 et supérieur
IE 9 et 10
IE 10 uniquement
IE 10 et supérieur
ou
L'utilisation de
-ms-high-contrast
signifie que MS Edge ne sera pas ciblé, car Edge ne le prend pas en charge-ms-high-contrast
.IE 11
Alternatives Javascript
Moderniser
Sélection de l'agent utilisateur
Javascript:
Ajoute (par exemple) ce qui suit à l'
html
élément:Permettre des sélecteurs CSS très ciblés, par exemple:
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
la source
clip: auto\9;
est toujours interprété commeclip: auto;
dans IE 11. D'une manière ou d'une autre, cela n'est pas ignoré ...@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-ms-high-contrast: active
pourrait ê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-contrast
qui indique en fait que seule la-ms-high-contrast: none
valeur 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.Pour cibler IE10 et IE11 uniquement (et non Edge):
la source
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 uniquement
msTextCombineHorizontal
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)
Afficher l'extrait de code
/** 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.
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.
la source
if (document.documentMode === 11) { ... }
? À moins, bien sûr, que vous souhaitiez utiliser la propriété CSS dans une@supports
règle at (qui n'est pas encore prise en charge dans IE, d'ailleurs).Cela semble fonctionner:
https://www.limecanvas.com/css-hacks-for-targeting-ie-10-and-above/
la source
Vous pouvez écrire votre code IE11 normalement, puis utiliser
@supports
et rechercher une propriété qui n'est pas prise en charge dans IE11, par exemplegrid-area: auto
.Vous pouvez ensuite écrire vos styles de navigateur modernes dans ce cadre. IE ne prend pas en charge la
@supports
règle et utilisera les styles d'origine, alors que ceux-ci seront remplacés dans les navigateurs modernes qui prennent en charge@supports
.la source
@supports
du tout en charge, donc il ignore tout ce qui se trouve dans le@supports
bloc. Vous pouvez donc mettre n'importe quoi dans le conditionnel @supports (par exemple@supports (display: block)
) et IE11 le sautera toujours.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.la source
Cela a fonctionné pour moi
Et puis dans le fichier css, les choses préfixées par
Quand ce navigateur est-il prêt à mourir?
la source
Essaye ça:
la source
Jetez un œil à cet article: CSS: Sélecteurs d'agents utilisateurs
En gros, lorsque vous utilisez ce script:
Vous pouvez maintenant utiliser CSS pour cibler n'importe quel navigateur / version.
Donc, pour IE11, nous pourrions faire ceci:
VIOLON
la source
rv:11.0
dans sa chaîne d'agent utilisateur.Utilisez les propriétés suivantes:
la source
Vous devez utiliser Modernizr, il ajoutera une classe à la balise body.
aussi:
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:
Ce qui signifie que vous pouvez simplement tester, pour les versions 11.xx,
la source
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
la source
Si vous utilisez Modernizr , vous pouvez facilement faire la différence entre IE10 et IE11.
IE10 ne prend pas en charge la
pointer-events
propriété. IE11 le fait. ( caniuse )Maintenant, en fonction de la classe insérée par Modernizr, vous pouvez avoir le CSS suivant:
la source
Vous pouvez utiliser js et ajouter une classe en html pour maintenir le standard des commentaires conditionnels :
Ou utilisez une lib comme bowser:
https://github.com/ded/bowser
Ou modernizr pour la détection des fonctionnalités:
http://modernizr.com/
la source
Détecter IE et ses versions est en fait extrêmement simple, du moins extrêmement intuitif:
.
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:
la source
Vous pouvez essayer ceci:
la source
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!
la source
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.
la source