动态CSS3前缀用户代理检测

7

我没有看到使用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样式。

来源

2010-09-20 03:28:48

1

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

来源

2010-09-20 03:45:08 Yahel

+0

这是一个更好的解决方案，只是不要忘记检查'$（'＃blah'）.css（'border-radius'）;'。 – 2010-09-20 03:48:21

+0

这非常有趣。需要5次检查（'-webkit'，'-moz'，'-o'，'-ms'和空白前缀），可以在窗口设置开始处的隐藏元素上完成，稍后将移除。非常好。 – 2010-09-20 03:53:10

+0

是的，我现在不会恭喜我。看来结果还不可靠;试图改进它。 – Yahel 2010-09-20 03:55:15

1

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

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

来源

2010-09-20 04:02:14

+0

不知道这是否可以帮助前缀的东西，但。猜猜我不应该做出这个答案。 =/ – 2010-09-20 04:04:49

+0

它确实没有，是吗？如果modernizer具有Modernizer.prefix的话，那将会很棒。我在一年前遇到过它，但它确实在增长。它很好地补充了前缀，并提供了动态属性的更清晰的实现（如果不支持它，甚至不尝试设置）。 – 2010-09-20 04:27:45

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代码并循环访问属性或测试特定的属性。歌剧院也想成为奇怪的人，而不是报道供应商前缀dasherized。谢谢歌剧。

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中。

来源

2011-07-09 17:41:40

0

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

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

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

来源

2012-06-06 15:36:12

动态CSS3前缀用户代理检测

回答

相关问题