检查“-ms-expand”支持答案

【问题标题】：Check for "-ms-expand" support检查“-ms-expand”支持
【发布时间】：2015-03-15 02:36:30
【问题描述】：

我正在尝试制作一个小脚本来在我的 html 测试中设置“选择”标签的样式，以支持“外观”样式属性：

    if ("webkitAppearance" in select.style ||
        "MozAppearance" in select.style ||
        "oAppearance" in select.style ||
        "appearance" in select.style ||
        "-ms-expand" in select.style) {
      return;
    } 
    // else apply wrapper and style it.

问题是我不知道如何检查 -ms-expand 属性，因为它不起作用，在这种情况下我不想用户浏览器版本嗅探。

【问题讨论】：

好吧，看看所有其他的是如何构建的。 -moz-appearance 变为 MozAppearance。你认为-ms-expand 可能会变成MsExpand？也就是说，它可能会遵循 Chrome 的模式并成为 msExpand，但无论哪种方式，只是逻辑......
已经尝试了所有的msExpand、MsExpand、MSExpand...

标签： javascript css internet-explorer internet-explorer-10 internet-explorer-11

【解决方案1】：

你不能在javascript中检查-ms-expand，因为它是伪元素，不影响内容。您无法像Modernizr 中的::before/::after 那样检测到它，但在IE 10+ 中启用了-ms-expand，因此最好通过javascript 检测IE 10 或更高版本：

检测 IE 11：

!window.ActiveXObject && "ActiveXObject" in window

检测 IE 10：

var isIE10 = false;
/*@cc_on
    if (/^10/.test(@_jscript_version)) {
        isIE10 = true;
    }
@*/

【讨论】：

这对我来说是“找不到其他方法”的解决方案。
Alhadis 的解决方案更加简洁，并且不依赖于黑客或浏览器版本。每当发布新版本时，此解决方案都会中断。

【解决方案2】：

就性能而言不是最佳解决方案，但您可以试试这个：

var expandSupport = (function(){
    try{
        var style = document.createElement("style");
        style.textContent = "#ie10-test::-ms-expand{ }";
        document.body.appendChild(style);
        var supported = !!style.sheet.rules.length;
        document.body.removeChild(style);
        return supported;
    } catch(e){ return false; }
}());

document.body.appendChild(document.createTextNode(expandSupport ? "Your browser appears to support the -ms-expand pseudo-element" : "Your browser doesn't appear to support the -ms-expand pseudo-element"));

Fiddle here.

这样做的原因是浏览器会丢弃它们不支持或无法解释的任何选择器，这意味着任何不理解“::-ms-expand”伪元素的浏览器可能是不是 IE10 或更高版本。

基本上，这段代码所做的只是创建一个虚拟的

【讨论】：

这是一个非常“奇怪”的解决方案，但肯定是原创的。我想我可以测试一下。
就像 Pinal 所说的那样，对伪元素的支持并不能像常规 CSS 属性那样容易确定，这意味着必须采用一种不太正统的方法来检测支持。当然，您始终可以尝试仅根据浏览器版本检查支持（这总是不好的做法），但这不是故障安全解决方案......不能保证未来版本的 IE 不会对伪使用不同的语法-element，或者完全放弃对它的支持。不太可能，但可能。
那么，为什么 Modernizr 不使用这种方法来测试它呢？我将对此进行分析，看看它的表现如何......
嗯，“-ms-expand”是特定于供应商的扩展，而不是在标准轨道上。为像这样的非标准/浏览器或平台特定功能提供功能检测不是 Modernizr 的工作。它也不是常用或引用的伪元素（见鬼，这是我第一次听说它），所以我无法想象 Modernizr 中对特征检测的需求会太大。 :)
经过测试，在IE8上崩溃了，我会尝试将代码调整为ie8安全。