Comment utiliser Modernizr pour détecter IE?

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 non.

J'ai une application appelée Pano2VR qui produit à la fois HTML5 et SWF. J'ai besoin du 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, une ou plusieurs apparemment non prises en charge dans IE9.

Donc, pour ces utilisateurs, j'ai besoin d'afficher la version Flash. J'avais l'intention d'utiliser un IFRAME et de transmettre le SRC via un script Modernizr ou un document.Write le code IFRAME correct en fonction du navigateur.

Tout cela conduit à comment utiliser Modernizr pour détecter simplement IE ou non IE? Ou détecter les transformations CSS 3D?

Ou est-ce qu'il y a un autre moyen de le faire?

Je suis d'accord que nous devrions tester les fonctionnalités, mais il est difficile de trouver une réponse simple à "quelles fonctionnalités sont prises en charge par les" navigateurs modernes "mais pas par les" anciens navigateurs "?"

J'ai donc lancé un tas de navigateurs et inspecté directement Modernizer. J'ai ajouté quelques fonctionnalités dont j'ai vraiment besoin, puis j'ai ajouté "inputtypes.color" car cela semble couvrir tous les principaux navigateurs qui me tiennent à cœur: Chrome, Firefox, Opera, Edge ... et PAS IE11. Maintenant, je peux doucement suggérer que l'utilisateur serait mieux avec Chrome / Opera / Firefox / Edge.

C'est ce que j'utilise - vous pouvez modifier la liste des choses à tester pour votre cas particulier. Renvoie false si l'une des fonctionnalités est manquante.

/**
 * Check browser capabilities.
 */
public CheckBrowser(): boolean
{
    let tests = ["csstransforms3d", "canvas", "flexbox", "webgl", "inputtypes.color"];

    // Lets see what each browser can do and compare...
    //console.log("Modernizr", Modernizr);

    for (let i = 0; i < tests.length; i++)
    {
        // if you don't test for nested properties then you can just use
        // "if (!Modernizr[tests[i]])" instead
        if (!ObjectUtils.GetProperty(Modernizr, tests[i]))
        {
            console.error("Browser Capability missing: " + tests[i]);
            return false;
        }
    }

    return true;
}

Et voici cette méthode GetProperty qui est nécessaire pour "inputtypes.color".

/**
 * Get a property value from the target object specified by name.
 * 
 * The property name may be a nested property, e.g. "Contact.Address.Code".
 * 
 * Returns undefined if a property is undefined (an existing property could be null).
 * If the property exists and has the value undefined then good luck with that.
 */
public static GetProperty(target: any, propertyName: string): any
{
    if (!(target && propertyName))
    {
        return undefined;
    }

    var o = target;

    propertyName = propertyName.replace(/\[(\w+)\]/g, ".$1");
    propertyName = propertyName.replace(/^\./, "");

    var a = propertyName.split(".");

    while (a.length)
    {
        var n = a.shift();

        if (n in o)
        {
            o = o[n];

            if (o == null)
            {
                return undefined;
            }
        }
        else
        {
            return undefined;
        }
    }

    return o;
}

Modernizr ne détecte pas les navigateurs en tant que tels, il détecte les fonctionnalités et capacités présentes et c'est tout ce qu'il essaie de faire.

Vous pouvez essayer de vous connecter à 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ù cela serait nécessaire. Si vous ne voulez vérifier que n'importe quelle version d'IE, vous pouvez simplement rechercher le 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;

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

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 actuellement pas prévu de le faire.

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

Détection des transformations CSS 3D

Modernizr peut détecter les transformations CSS 3D , oui. La véracité deModernizr.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, et l'option que vous recherchez y est disponible.

Détecter spécifiquement IE

Alternativement , comme user356990 a répondu, vous pouvez utiliser des commentaires conditionnels si vous recherchez uniquement IE et IE. Plutôt que de créer une variable globale, vous pouvez utiliser l'astuce des <html>commentaires conditionnels de HTML5 Boilerplate pour attribuer 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 avez besoin de vérifier la version d'IE dans laquelle vous vous trouvez afin de pouvoir charger sous condition jQuery 1.x ou 2.x, vous pouvez faire quelque chose comme ceci:

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

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

Quelle que soit la méthode que vous choisissez, vous testerez ensuite avec

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

Ne prenez pas cela au ||pied de la lettre, bien sûr.

Si vous recherchez une version JS (utilisant une combinaison de détection de fonctionnalités et de reniflage UA) de ce que faisait le passe-partout html5:

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

Eh bien, après avoir fait plus de recherches sur ce sujet, j'ai fini par utiliser la solution suivante pour cibler IE 10+. Comme IE10 et 11 sont les seuls navigateurs qui prennent en charge la requête multimédia -ms-high-contrast, c'est une bonne option sans JS:

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

Fonctionne parfaitement.

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 uniques à IE et peuvent donc être utilisés pour détecter la version 11 d'IE.

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

J'avais besoin de détecter IE par rapport à presque tout le reste et je ne voulais pas dépendre de la chaîne UA. J'ai trouvé qu'en utilisantes6number avec Modernizr faisait exactement ce que je voulais. Je ne suis pas très préoccupé par ce changement car je ne m'attends pas à ce qu'IE prenne jamais en charge le numéro ES6. Alors maintenant, je connais la différence entre n'importe quelle version d'IE vs 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 d'Opera Mini. Tu pourrais être.

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