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
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.
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.
À la lumière de l'évolution du fil, j'ai mis à jour le ci-dessous:
* html .ie6 {property:value;}
ou
.ie6 { _property:value;}
*+html .ie7 {property:value;}
ou
*:first-child+html .ie7 {property:value;}
@media screen\9 {
.ie67 {property:value;}
}
ou
.ie67 { *property:value;}
ou
.ie67 { #property:value;}
@media \0screen\,screen\9 {
.ie678 {property:value;}
}
html>/**/body .ie8 {property:value;}
ou
@media \0screen {
.ie8 {property:value;}
}
.ie8 { property /*\**/: value\9 }
@media screen\0 {
.ie8910 {property:value;}
}
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
@media screen and (min-width:0) {
.ie910{property:value;}
}
_:-ms-lang(x), .ie10 { property:value\9; }
_:-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
.
_:-ms-fullscreen, :root .ie11up { property:value; }
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
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;
}
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.
@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 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;
}
}
Essaye ça:
/*------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 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.
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?
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:
html[data-useragent*='rv:11.0']
{
color: green;
}
Vous pouvez essayer ceci:
if(document.documentMode) {
document.documentElement.className+=' ie'+document.documentMode;
}
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:
Ou modernizr pour la détection de fonctionnalité:
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-';
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\./)
Utilisez les propriétés suivantes:
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.
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 */
}
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 */
}
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.