Question

我想检测浏览器是否支持使用javascript的CSS属性（特别是，是否支持“过滤器”）？我怎么能这样做？

我尝试了以下功能

 supportsCssStyle: function (prop) {
        var div = document.createElement('div'),
            vendors = 'Khtml Ms O Moz Webkit'.split(' '),
            len = vendors.length;

        if (prop in div.style) return true;

        prop = prop.replace(/^[a-z]/, function (val) {
            return val.toUpperCase();
        });

        while (len--) {
            if (vendors[len] + prop in div.style) {
                // browser supports box-shadow. Do what you need.
                // Or use a bang (!) to test if the browser doesn't.
                return true;
            }
        }
        return false;
    },

但它不起作用

Answer 1

正如Oriol在评论中指出的那样，我原来的答案是错误的（但不知何故最终得到了3个赞成票）。这是一种更可靠的方式。

function supportsProperty(prop) {
  var el = document.createElement("div");
  el.style.cssText = prop + ":initial";
  return el.style[prop] === "initial";
}

function supportsValue(prop, value) {
  var el = document.createElement("div");
  el.style.cssText = prop + ":" + value;
  return el.style[prop] === value;
}

console.log("filter", supportsProperty("filter")); // true for me
console.log("-ms-flex", supportsProperty("-ms-flex")); // false for me
console.log("position:sticky", supportsValue("position", "sticky")); // true for me

Answer 2

我知道这个问题针对的是JS解决方案，但由于它是一个正在解决的CSS问题，因此@supports功能查询现在可以得到很好的支持......除了......（惊喜！）Internet Explorer（Edge支持它，但完整列表：http://caniuse.com/#feat=css-featurequeries）

如何使用javascript检测浏览器是否支持css属性？

2 个答案: