动态 CSS3 前缀用户代理检测答案

【问题标题】：Dynamic CSS3 prefix user agent detection动态 CSS3 前缀用户代理检测
【发布时间】：2010-09-20 03:21:20
【问题描述】：

有没有比使用jQuery.browser 或equivalents 更好的方法来确定css 3 前缀（-moz、-webkit 等），如it is disencouraged？由于 css 是动态的（用户可以在运行时对其进行任何操作），因此不能考虑 css hacks 和 style tag hacks。

【问题讨论】：

标签： javascript jquery css cross-browser user-agent

【解决方案1】：

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

不鼓励使用 navigator 对象的原因是因为它在为不同浏览器编写 (java) 脚本时用于对象检测，您的情况是可以使用用户代理检测，因为您特别使用不同的渲染引擎针对某些怪癖。

编辑： 从 cy 停止的地方开始，您可以使用 javascript 对象检测来检测是否使用了前缀，我做了一些快速代码来做到这一点：

window.onload = function ()
{
    CSS3 = {
        supported: false,
        prefix: ""
    };
    if (typeof(document.body.style.borderRadius) != 'undefined') {
        CSS3.supported = true;
        CSS3.prefix = "";
    } else if (typeof(document.body.style.MozBorderRadius) != 'undefined') {
        CSS3.supported = true;
        CSS3.prefix = "-moz-";
    } else if (typeof(document.body.style.webkitBorderRadius) != 'undefined') {
        CSS3.supported = true;
        CSS3.prefix = "-webkit-";
    }
    if (CSS3.supported)
        if (CSS3.prefix == "")
            alert("CSS3 is supported in this browser with no prefix required.");
        else
            alert("CSS3 is supported in this browser with the prefix: '"+CSS3.prefix+"'.");
    else
        alert("CSS3 is NOT supported in this browser.");
};

记住要注意一些奇怪的怪癖，例如 -moz-opacity，它仅在旧版本的 Firefox 中受支持，但现在已被弃用，取而代之的是 opacity，但它仍将 -moz- 前缀用于其他新的 CSS3 样式.

【讨论】：

【解决方案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 还想成为一个奇怪的人，而不是报告供应商前缀破灭。谢谢歌剧。

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。

【讨论】：

【解决方案3】：

它正在添加到另一个库中，但Modernizr 对你有用吗？它将 CSS 类添加到 <html> 标记中，可以告诉您浏览器支持什么。

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

【讨论】：

不确定这是否有助于前缀的事情。我想我不应该这样回答。 =/
真的没有，不是吗？如果modernizer 有一个 Modernizer.prefix 东西会很棒。大约一年前我遇到过它，但它确实成长了。它确实很好地补充了前缀，并提供了更简洁的动态属性实现（如果不支持，甚至不要尝试设置）。

【解决方案4】：

推测：是的。您可以尝试添加供应商前缀 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 中，这比我的方法更好）。

【讨论】：

这是一个更好的解决方案，只是不要忘记检查$('#blah').css('border-radius');。
这很有趣。需要 5 次检查（'-webkit'、'-moz'、'-o'、'-ms' 和空前缀），可以在窗口设置开始时在隐藏元素上完成，稍后将其删除.非常好。
是的，我还不会祝贺我。结果似乎还不可靠；试图改进它。
别担心，我也会先在我们的目标浏览器上试用。
这个答案不对。似乎只适用于 Chrome；不适用于 Firefox 或 Opera；尚未针对 IE 进行测试。

【解决方案5】：

我使用三元运算符将其仅放在 1 行中。如果它不是 webkit 也不是 gecko，我将只使用标准属性。如果它没有支持，那么谁真正在乎呢？

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

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

【讨论】：