Html 使用 Modernizr 检测 IE 的正确方法？

Correct way to use Modernizr to detect IE?

提问by Steve

This might be a stupid question, but I wanted to use the Modernizr JS library to detect for some browser properties to determine what content to show or not show.

这可能是一个愚蠢的问题，但我想使用 Modernizr JS 库来检测某些浏览器属性，以确定要显示或不显示的内容。

I have an app called Pano2VRwhich outputs both HTML5 and SWF. I need the HTML5 for iOS device users.

我有一个名为Pano2VR的应用程序，它输出 HTML5 和 SWF。我需要 iOS 设备用户的 HTML5。

However, IE does not render this "HTML5" output at all. It seems their output uses CSS3 3D transforms and WebGL, one or more apparently unsupported in IE9.

但是，IE 根本不呈现此“HTML5”输出。似乎他们的输出使用了 CSS3 3D 转换和 WebGL，IE9 中显然不支持一种或多种。

So, for those users I need to display the Flash version. I was planning to use an IFRAME and either pass the SRC via a Modernizr script or document.write out the correct IFRAME code depending on browser.

因此，对于那些用户，我需要显示 Flash 版本。我打算使用 IFRAME 并通过 Modernizr 脚本或文档传递 SRC。根据浏览器写出正确的 IFRAME 代码。

All of which leads to how do I use Modernizr to detect simply IE or not IE? Or detect for CSS 3d transforms?

所有这些都导致我如何使用 Modernizr 来检测 IE 或不检测 IE？或者检测 CSS 3d 转换？

Or is there another way to do this?

或者有另一种方法可以做到这一点？

采纳答案by Etherman

I agree we should test for capabilities, but it's hard to find a simple answer to "what capabilities are supported by 'modern browsers' but not 'old browsers'?"

我同意我们应该测试功能，但很难找到一个简单的答案“'现代浏览器'支持哪些功能而不是'旧浏览器'？”

So I fired up a bunch of browsers and inspected Modernizer directly. I added a few capabilities I definitely require, and then I added "inputtypes.color" because that seems to cover all the major browsers I care about: Chrome, Firefox, Opera, Edge...and NOT IE11. Now I can gently suggest the user would be better off with Chrome/Opera/Firefox/Edge.

所以我启动了一堆浏览器并直接检查了 Modernizer。我添加了一些我绝对需要的功能，然后添加了“inputtypes.color”，因为这似乎涵盖了我关心的所有主要浏览器：Chrome、Firefox、Opera、Edge……而不是 IE11。现在我可以温和地建议用户使用 Chrome/Opera/Firefox/Edge 会更好。

This is what I use - you can edit the list of things to test for your particular case. Returns false if any of the capabilities are missing.

这就是我使用的 - 您可以编辑要针对您的特定情况进行测试的内容列表。如果缺少任何功能，则返回 false。

/**
 * 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;
}

And here is that GetProperty method which is needed for "inputtypes.color".

这是“inputtypes.color”所需的 GetProperty 方法。

/**
 * 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, ".");
    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;
}

回答by Code Uniquely

Modernizr doesn't detect browsers as such, it detects which feature and capability are present and this is the whole jist of what it's trying to do.

Modernizr 本身不会检测浏览器，它会检测存在哪些特性和功能，这就是它尝试做的全部内容。

You could try hooking in a simple detection script like this and then using it to make your choice. I've included Version Detection as well just in case that's needed. If you only want to check of any version of IE you could just look for the navigator.userAgent having a value of "MSIE".

您可以尝试挂钩这样一个简单的检测脚本，然后使用它来做出选择。我也包括了版本检测，以防万一。如果您只想检查任何版本的 IE，您只需查找值为“MSIE”的 navigator.userAgent。

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>");

You can then simply check for:

然后您可以简单地检查：

BrowserDetect.browser == 'Explorer';
BrowserDetect.version <= 9;

回答by jacefarm

You can use Modernizrto detect simply IE or not IE, by checking for SVG SMILanimation support.

您可以使用Modernizr通过检查 SVG SMIL动画支持来检测 IE 或非 IE 。

If you've included SMILfeature detection in your Modernizr setup, you can use a simple CSS approach, and target the .no-smilclass that Modernizr applies to the htmlelement:

如果您在 Modernizr 设置中包含了SMIL功能检测，则可以使用简单的 CSS 方法，并将Modernizr 应用于html元素的.no-smil类作为目标：

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

Alternatively, you could use Modernizr with a simple JavaScript approach, like so:

或者，您可以通过简单的 JavaScript 方法使用 Modernizr，如下所示：

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

Bear in mind, IE/Edge might someday support SMIL, but there are currently no plans to do so.

请记住，IE/Edge 可能有一天会支持SMIL，但目前还没有这样做的计划。

For reference, here's a link to the SMILcompatibility chart at caniuse.com.

作为参考，这里是caniuse.com 上SMIL兼容性图表的链接。

回答by iono

Detecting CSS 3D transforms

检测 CSS 3D 变换

Modernizr can detect CSS 3D transforms, yeah. The truthiness of Modernizr.csstransforms3dwill tell you if the browser supports them.

Modernizr可以检测 CSS 3D 转换，是的。的真实性Modernizr.csstransforms3d会告诉您浏览器是否支持它们。

The above link lets you select which tests to include in a Modernizr build, and the option you're looking for is available there.

通过上面的链接，您可以选择要包含在 Modernizr 构建中的测试，并且您正在寻找的选项在那里可用。

---

---

Detecting IE specifically

专门检测IE

Alternatively, as user356990 answered, you can use conditional comments if you're searching for IE and IE alone. Rather than creating a global variable, you can use HTML5 Boilerplate's <html>conditional comments trick to assign a class:

或者，正如 user356990 回答的那样，如果您单独搜索 IE 和 IE，则可以使用条件注释。您可以使用 HTML5 Boilerplate 的<html>条件注释技巧来分配一个类，而不是创建一个全局变量：

<!--[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]-->

If you already have jQuery initialised, you can just check with $('html').hasClass('lt-ie9'). If you need to check which IE version you're in so you can conditionally load either jQuery 1.x or 2.x, you can do something like this:

如果您已经初始化了 jQuery，则可以使用$('html').hasClass('lt-ie9'). 如果您需要检查您使用的是哪个 IE 版本，以便有条件地加载 jQuery 1.x 或 2.x，您可以执行以下操作：

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. IE conditional comments are only supported up to IE9 inclusive. From IE10 onwards, Microsoft encourages using feature detection rather than browser detection.

NB IE 条件注释仅支持 IE9 及更高版本。从 IE10 开始，Microsoft 鼓励使用功能检测而不是浏览器检测。

---

---

Whichever method you choose, you'd then test with

无论您选择哪种方法，您都可以使用

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

Don't take that ||literally, of course.

||当然，不要从字面上理解。

回答by Pete B

If you're looking for a JS version (using a combination of feature detection and UA sniffing) of what html5 boilerplate used to do:

如果您正在寻找 html5 样板过去所做的 JS 版本（使用特征检测和 UA 嗅探的组合）：

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

回答by Oliver White

Well, after doing more research on this topic I ended up using following solution for targeting IE 10+. As IE10&11 are the only browsers which support the -ms-high-contrast media query, that is a good option without any JS:

好吧，在对这个主题做了更多研究之后，我最终使用了以下针对 IE 10+ 的解决方案。由于 IE10&11 是唯一支持 -ms-high-contrast 媒体查询的浏览器，这是一个没有任何 JS 的不错选择：

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

Works perfectly.

完美运行。

回答by Julian Veling

CSS tricks have a good solution to target IE 11:

CSS 技巧有一个很好的解决方案来定位 IE 11：

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

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

The .NET and Trident/7.0 are unique to IE so can be used to detect IE version 11.

.NET 和 Trident/7.0 是 IE 独有的，因此可用于检测 IE 版本 11。

The code then adds the User Agent string to the html tag with the attribute 'data-useragent', so IE 11 can be targeted specifically...

然后代码将用户代理字符串添加到具有“data-useragent”属性的 html 标记中，因此可以专门针对 IE 11...

回答by crazy4groovy

You can use the < !-- [if IE] >hack to set a global js variable that then gets tested in your normal js code. A bit ugly but has worked well for me.

您可以使用< !-- [if IE] >hack 设置一个全局 js 变量，然后在您的普通 js 代码中进行测试。有点丑，但对我来说效果很好。

回答by Splaktar

I needed to detect IE vs most everything else and I didn't want to depend on the UA string. I found that using es6numberwith Modernizr did exactly what I wanted. I don't have much concern with this changing as I don't expect IE to ever support ES6 Number. So now I know the difference between any version of IE vs Edge/Chrome/Firefox/Opera/Safari.

我需要检测 IE 与大多数其他东西，我不想依赖 UA 字符串。我发现使用es6numberModernizr 正是我想要的。我不太关心这种变化，因为我不希望 IE 支持 ES6 Number。所以现在我知道任何版本的 IE 与 Edge/Chrome/Firefox/Opera/Safari 之间的区别。

More details here: http://caniuse.com/#feat=es6-number

更多细节在这里：http: //caniuse.com/#feat=es6-number

Note that I'm not really concerned about Opera Mini false negatives. You might be.

请注意，我并不真正关心 Opera Mini 的漏报。你可能是。