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

Question

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

mck*_*k89 24 javascript css browser-feature-detection

是否有可能在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!');
}

Run Code Online (Sandbox Code Playgroud)

可能值得注意的是，这从技术上测试了浏览器是否支持CSS3的“ transform”样式，而不是专门的“ rotate（）” [transform function]（https://developer.mozilla.org/zh-CN/docs/Web / CSS / transform＃CSS_transform_functions）。根据我的（有限的）经验，前者始终暗含后者，但是我不确定这是否是一个可靠的假设（请参阅[此问题]（http://stackoverflow.com/questions/23528176/do-all-browsers -that-support-css3-transforms-support-all-transform-function））。 (2认同)

Answer 2

ter*_*rmi 8

为此目的,有一个新的DOM API CSS.supports.FF,Opera(作为supportCSS)和Chrome Canary已经实现了这种方法.

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

例:

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

Run Code Online (Sandbox Code Playgroud)

但是,您仍需要为css属性添加前缀来指定浏览器前缀.例如:

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	16 年，3 月前
查看次数：	15333 次
最近记录：	8 年，6 月前