如何测试像modernizr.js这样的css属性

Question

我想测试浏览器是否支持CSS属性。我知道我可以使用modernizr来做这个，但我不想安装整个库来测试一个属性。

modernizr如何测试属性？假设我想测试对background-size属性的支持。

我扫描了文档对象的属性，但看不到任何看起来有用的内容。

任何想法或帮助都会很棒。

Answer 1

Modernizr通过创建元素，应用css属性然后检查css属性的返回值来工作。例如，如果您想测试文本阴影，您可以这样做：

if (document.createElement("detect").style.textShadow === "") {
    document.getElementsByTagName("html")[0].className += " textshadow";
}

Answer 2

我认为这将特定于每个功能，因为您必须在DOM中查找某些副作用。这是一个包含一些想法的链接http://www.sitepoint.com/detect-css3-property-browser-support/

Answer 3

Modernizr是一个开源项目 - 您可以从字面上查看支持它的代码。 here具体是背景大小检测。

这是一件相当简单的事情。您创建一个dom元素，将background-size（包括vanilla和所有供应商前缀版本）设置为100%，然后在dom元素的样式属性上检查backgroundSize的值，以查看它是否保留该值

话虽如此 - 现代化者非常精益。您只需获得所需的测试，仅此而已。