Question

使用jQuery.browser或equivalents确定css 3前缀（-moz，-webkit等）是否有更好的方法，如it is disencouraged？由于css是动态的（用户可以在运行时使用它做任何事情），因此不能考虑css hacks和样式标记黑客。

Answer 1

我没有看到使用navigator.userAgent来确定您是否需要满足Webkit / Gecko CSS3前缀的问题。或者更好的是，只需坚持使用CSS2，直到CSS3成为W3C推荐标准。

不鼓励使用navigator对象的原因是因为它在用于不同浏览器的（java）脚本时被用于对象检测，你的情况是可以使用用户代理检测，因为你的' e专门针对具有不同渲染引擎的某些怪癖。

修改从cy停止的地方拾取，你可以使用javascript对象检测来检测是否使用了前缀，我做了一些快速代码：

Answer 2

Array.prototype.slice.call(
  document.defaultView.getComputedStyle(document.body, "")
)
.join("")
.match(/(?:-(moz|webkit|ms|khtml)-)/);

将返回包含两个元素的数组。一个用破折号，一个没破折号，两个都是小写的，为了您的方便。

Array.prototype.slice.call(
  document.defaultView.getComputedStyle(document.body, "")
);

如果没有浏览器检查，将返回浏览器理解的几乎所有css属性的数组。由于它的计算风格不会显示速记版本，但我认为它会获得所有这些。这是一个快速的跳跃跳跃和跳转到自动检测你需要的任何东西，因为只有供应商前缀的东西以短划线开始。

IE9，Chrome，Safari，FF。 Opera不会让你切片CSSStyleDeclaration，因为你仍然可以使用相同的getComputedStyle代码并循环遍历属性或测试特定的属性。 Opera也希望成为奇怪的人，而不是报告供应商前缀dasherized。谢谢Opera。

Object.keys(CSSStyleDeclaration.prototype)

适用于IE9和FF，并报告供应商属性名称的TitleCased（JavaScript）版本。在WebKit中不起作用，因为原型仅报告方法。

这是一个有趣且非常危险的函数我刚才写的这些：

(function(vp,np){
Object.keys(this).filter(function(p){return vp=vp||p.match(/^(Moz|ms)/)}).forEach(function(op){
    this.__defineGetter__(np=op.replace(vp[0], ""), function() { return this[op] });
    this.__defineSetter__(np, function(val) { this[op] = val.toString() });
}, this);
}).call(CSSStyleDeclaration.prototype);

我没有测试任何Konquerer。

Answer 3

推测：是的。您可以尝试添加供应商前缀css规则（这就是他们所称的），然后测试以查看该规则是否存在。这些特定于供应商的规则不会添加到不受支持的浏览器中的DOM 在某些情况下。

<击> 例如，如果您尝试在webkit中添加-moz规则，它将不会添加到DOM，因此jQuery将无法检测到它。

<击>

所以，

$('#blah').css('-moz-border-radius','1px');
$('#blah').css('-moz-border-radius') //null in Chrome

相反，

$('#blah').css('-webkit-border-radius','1px');
$('#blah').css('-webkit-border-radius'); //returns "" in Chrome

<击> 此方法适用于WebKit浏览器;我正在测试它是否适用于其他人。悬而未决。

编辑：遗憾的是，这在Firefox或Opera中无效，无论兼容性如何，它都会返回“”。想办法跨浏览器......

最终编辑：Andrew Dunn's answer以一种有效的方式（至少在FF和Webkit中，这比我的方法更好）。

Answer 4

它正在添加另一个库，但Modernizr会为你工作吗？它将CSS类添加到<html>标记中，可以告诉您浏览器支持的内容。

它会使代码变得混乱，但在适当的情况下肯定会有所帮助。

Answer 5

我使用三元运算符只能在一行中使用它。如果它不是webkit或gecko，我只会使用标准属性。如果它没有支持，谁真正关心呢？

var prefix = ('webkitAnimation' in document.body.style) ? '-webkit-' : ('MozAnimation' in document.body.style? '-moz-' : '');

基本上我发现动画是永不改变的属性之一。一旦浏览器开始支持CSS3属性的Draft / Candidate Recommendation，它就会删除JS端的前缀。因此，在复制粘贴之前，您需要小心并牢记这一点。

动态CSS3前缀用户代理检测

5 个答案: