使用 JavaScript 检查浏览器 CSS 属性支持？答案

【问题标题】：Check browser CSS property support with JavaScript?使用 JavaScript 检查浏览器 CSS 属性支持？
【发布时间】：2010-11-23 12:01:17
【问题描述】：

在 JavaScript 中是否可以知道客户端浏览器是否支持 CSS 属性？我说的是 CSS3 的旋转属性。我只想在浏览器支持的情况下执行某些功能。

【问题讨论】：

标签： javascript css browser-feature-detection

【解决方案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!');
}

【讨论】：

值得注意的是，这在技术上测试了浏览器是否支持 CSS3 transform 样式，而不是具体的 rotate() transform function。在我（有限的）经验中，前者总是暗示后者，但我不确定这是否是一个可靠的假设（参见this question）。
工作示例：jsfiddle.net/dp3ueaz5 但我更愿意使用此功能：code.tutsplus.com/tutorials/… 更好理解，它会自动检查供应商前缀。 ;)

【解决方案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 进行特征检测。

【讨论】：

【解决方案3】：

您可以使用Modernizr 库。

css 转换示例：

在.css文件中；

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

在 .js 文件中；

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

【讨论】：

【解决方案4】：

可以试试这个吗？

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

【讨论】：

不是一个理想的答案，但为什么这被否决了？我没有看到任何技术错误
@RobertDundon 也许我的解决方案就像第一个一样，无论如何感谢支持 =)