检查“-ms-expand”支持

Check for "-ms-expand" support

本文关键字：支持 -ms-expand 检查      更新时间：2023-09-26

我正在尝试制作一个小脚本来在我的 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 属性，因为它不起作用，并且我不想在这种情况下用户浏览器版本嗅探。

你不能在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;
    }
@*/

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

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

在这里摆弄。

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

从本质上讲，此代码所做的只是创建一个虚拟<样式>标记，添加一个只有 IE10+ 支持的规则集，并报告在其中找到的规则数。

相关文章：