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

Question

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

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!');
}

Answer 2

为此，有一个新的 DOM API CSS.supports 。 FF、Opera（支持 CSS）和 Chrome Canary 已经实现了此方法。

对于跨浏览器兼容性，您可以使用我的 CSS.supports polyfill

示例：

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

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

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

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

Answer 3

可以试试这个吗？

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

Answer 4

您可以使用 Modernizr 库。

css 转换示例：

在 .css 文件中；

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

在 .js 文件中；

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