web-dev-qa-db-fra.com

Comment utiliser Modernizr pour détecter IE?

Cela peut paraître une question stupide, mais je voulais utiliser la bibliothèque Modernizr JS pour détecter certaines propriétés du navigateur afin de déterminer le contenu à afficher ou à ne pas afficher.

J'ai une application appelée Pano2VR qui affiche à la fois HTML5 et SWF. J'ai besoin de HTML5 pour les utilisateurs d'appareils iOS.

Cependant, IE ne rend pas du tout cette sortie "HTML5". Il semble que leur sortie utilise des transformations 3D CSS3 et WebGL, un ou plusieurs apparemment non pris en charge dans IE9.

Donc, pour les utilisateurs, je dois afficher la version Flash. Je prévoyais d'utiliser un IFRAME et de transmettre le code SRC via un script Modernizr ou un document.écrire le code IFRAME approprié en fonction du navigateur.

Tout cela nous amène à comment utiliser Modernizr pour détecter simplement IE ou pas IE? Ou détecter des transformations 3d CSS? 

Ou y a-t-il une autre manière de le faire?

html5cross-browsermodernizr
79
Steve

Modernizr ne détecte pas les navigateurs en tant que tel, il détecte les fonctionnalités et les capacités présentes. Il s’agit là de l’essentiel de ce qu’il essaie de faire.

Vous pouvez essayer de vous accrocher à un script de détection simple comme celui-ci, puis de l'utiliser pour faire votre choix. J'ai également inclus la détection de version au cas où vous en auriez besoin. Si vous souhaitez uniquement vérifier une version de IE, vous pouvez simplement rechercher le fichier navigator.userAgent ayant la valeur "MSIE".

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };
    
    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

Vous pouvez alors simplement vérifier: 

BrowserDetect.browser == 'Explorer';
BrowserDetect.version <= 9;
183
Code Uniquely

Vous pouvez utiliser Modernizr pour détecter simplement IE ou pas IE, en vérifiant que l'animation SVG SMIL est prise en charge.

Si vous avez inclus la détection de fonctionnalités SMIL dans votre configuration Modernizr, vous pouvez utiliser une approche CSS simple et cibler la classe .no-smil que Modernizr applique à l'élément html. :

html.no-smil {
  /* IE/Edge specific styles go here - hide HTML5 content and show Flash content */
}

Alternativement, vous pouvez utiliser Modernizr avec une approche JavaScript simple, comme ceci:

if ( Modernizr.smil ) {
  /* set HTML5 content */
} else {
  /* set IE/Edge/Flash content */
}

Gardez à l'esprit qu'IE/Edge pourrait un jour prendre en charge SMIL, mais il n'est pas prévu de le faire.

Pour référence, voici un lien vers le tableau de compatibilité SMIL sur caniuse.com .

19
jacefarm

Détecter les transformations CSS 3D

Modernizr peut détecter les transformations 3D CSS , ouais. La vérité de Modernizr.csstransforms3d vous dira si le navigateur les prend en charge.

Le lien ci-dessus vous permet de sélectionner les tests à inclure dans une version Modernizr. L'option que vous recherchez y est disponible.

Détecter IE spécifiquement

Vous pouvez également utiliser des commentaires conditionnels si vous recherchez IE et IE seul, comme le répond l'utilisateur356990. Plutôt que de créer une variable globale, vous pouvez utiliser l'astuce des commentaires conditionnels <html> de Boilerplate pour assigner une classe:

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

Si vous avez déjà initialisé jQuery, vous pouvez simplement vérifier avec $('html').hasClass('lt-ie9'). Si vous devez vérifier la version IE dans laquelle vous vous trouvez afin de pouvoir charger jQuery 1.x ou 2.x de manière conditionnelle, procédez comme suit:

myChecks.ltIE9 = (function(){
    var htmlElemClasses = document.querySelector('html').className.split(' ');
    if (!htmlElemClasses){return false;}
    for (var i = 0; i < htmlElemClasses.length; i += 1 ){
      var klass = htmlElemClasses[i];
      if (klass === 'lt-ie9'){
        return true;
      }
    }
    return false;
}());

N.B. Les commentaires conditionnels IE ne sont pris en charge que jusqu'à IE9 inclus. À partir de IE10, Microsoft encourage l'utilisation de la détection de fonctionnalités plutôt que celle du navigateur.

Quelle que soit la méthode que vous choisissez, vous devez alors tester avec

if ( myChecks.ltIE9 || Modernizr.csstransforms3d ){
    // iframe or flash fallback
}

Ne prenez pas ce || littéralement, bien sûr.

12
iono

Si vous recherchez une version JS (utilisant une combinaison de détection de fonctionnalité et de détection d’UA), procédez comme suit:

var IE = (!! window.ActiveXObject && +(/msie\s(\d+)/i.exec(navigator.userAgent)[1])) || NaN;
if (IE < 9) {
    document.documentElement.className += ' lt-ie9' + ' ie' + IE;
}
9
Pete B

Les astuces CSS ont une bonne solution pour cibler IE 11:

http://css-tricks.com/ie-10-specific-styles/

Le .NET et Trident/7.0 sont propres à IE et peuvent donc être utilisés pour détecter IE version 11.

Le code ajoute ensuite la chaîne de l'agent d'utilisateur à la balise html avec l'attribut 'data-useragent', afin que IE 11 puisse être ciblé spécifiquement ...

2
Julian Veling

Vous pouvez utiliser le < !-- [if IE] > Hack pour définir une variable globale js qui est ensuite testée dans votre code js normal. Un peu moche mais a bien fonctionné pour moi.

1
crazy4groovy

Je devais détecter IE par rapport à presque tout le reste et je ne voulais pas dépendre de la chaîne UA. J'ai trouvé que es6number avec Modernizr faisait exactement ce que je voulais. Je ne m'inquiète pas beaucoup de cette évolution car je ne m'attends pas à ce que IE prenne en charge le numéro ES6. Alors maintenant, je connais la différence entre toutes les versions de IE et Edge/Chrome/Firefox/Opera/Safari.

Plus de détails ici: http://caniuse.com/#feat=es6-number

Notez que je ne suis pas vraiment préoccupé par les faux négatifs Opera Mini. Tu pourrais être.

1
Splaktar

Après avoir effectué davantage de recherches sur ce sujet, j’ai finalement utilisé la solution suivante pour cibler IE 10 + . option sans JS:

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

Marche parfaitement.

0
Oliver White