使用JavaScript检查浏览器对CSS属性的支持？

Question

在JavaScript中，是否有可能知道客户端浏览器是否支持CSS属性？我指的是CSS3的旋转属性。只有在浏览器支持这些属性时，我才想执行一些函数。

- mck89

Answer 1

我相信你可以这样做：

if ('WebkitTransform' in document.body.style 
 || 'MozTransform' in document.body.style 
 || 'OTransform' in document.body.style 
 || 'transform' in document.body.style) 
{
    alert('I can Rotate!');
}

- jamland

---

值得注意的是，这个技术测试的是浏览器是否支持CSS3的transform样式，而不是特定的rotate()transform function。在我的（有限）经验中，前者总是暗示着后者，但我不确定这是否是一个可靠的假设（请参见这个问题）。 - Kylok

工作示例：http://jsfiddle.net/dp3ueaz5/ 但我更愿意使用这个函数：http://code.tutsplus.com/tutorials/quick-tip-detect-css-support-in-browsers-with-javascript--net-16444 更易理解，而且它会自动检查供应商前缀。;) - Dennis98

Answer 2

有一个新的DOM API CSS.supports 用于此目的。FF，Opera（作为supportsCSS）和Chrome Canary已经实现了这个方法。

为了实现跨浏览器兼容性，您可以使用我的CSS.supports polyfill

例子：

CSS.supports("display", "table");//IE<8 return false

但是，在为CSS属性添加前缀时，您仍然需要指定浏览器前缀。例如：

CSS.supports("-webkit-filter", "blur(10px)");

我建议使用Modernizr来进行特性检测。

- termi

Answer 3

也许可以试试这个？

var temp = document.createElement('div');
var isSupport = temp.style['propName'] != undefined;

- Buka

---

不是理想的答案，但为什么会被踩呢？我没有看到任何技术错误。 - Robert Dundon

@RobertDundon 或许我的解决方案与第一个相似，无论如何感谢您的支持 =) - Buka

Answer 4

你可以使用Modernizr库。

CSS transform的示例：

在.css文件中；

.no-csstransforms .box { color: red; }
.csstransforms .box { color: green; }

在 .js 文件中；

if (Modernizr.csstransforms) {
  // supported
} else {
  // not-supported
}

- Haydar C.