检查"-ms-expand“支持

Question

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

    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属性，因为它不工作，而且我不想在这种情况下使用浏览器版本进行嗅探。

Answer 1

你不能在javascript中检查-ms-expand，因为它是伪元素，并且它对内容没有影响。你不能像Modernizr中的::before/::after那样检测到它，但-ms-expand在IE 10+中是启用的，所以最好用javascript检测IE 10或更高版本：

检测IE 11：

!window.ActiveXObject && "ActiveXObject" in window

检测IE 10：

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

Answer 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- IE10”伪元素的浏览器可能不是展开或向上扩展。

本质上，这段代码所做的一切就是创建一个虚拟标记，添加一个只有IE10+支持的规则集，并报告在其中找到的规则的数量。