代码之家 › 专栏 › 技术社区 › Daniel Ribeiro

动态CSS3前缀用户代理检测

user-agent cross-browser css jquery javascript

Daniel Ribeiro · 技术社区 · 14 年前

有没有比使用 jQuery.browser ,或 equivalents ,用于确定 css 3 前缀(-moz、-webkit等),如 it is disencouraged

5 回复 | 直到 13 年前

Randy the Dev 14 年前

我不认为使用 navigator.userAgent 确定是否需要迎合Webkit/geckocss3前缀。或者更好的是,只要坚持CSS2,直到CSS3成为W3C的推荐。

使用的原因 navigator

编辑:

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 opacity ,而它仍然使用 -moz- 其他新CSS3样式的前缀。

user748221 user748221 14 年前

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

将返回包含两个元素的数组。为方便起见,一个带破折号,一个不带破折号,均为小写。

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

IE9、Chrome、Safari、FF。Opera不允许您分割CSSStyleDeclaration,因为您仍然可以使用相同的getComputedStyle代码,并通过特定代码的属性或测试进行循环。Opera还想成为一个古怪的人,而不是报告供应商前缀dasherized。谢谢你的歌剧。

Object.keys(CSSStyleDeclaration.prototype)

在IE9和FF中工作,并报告供应商属性名称的基于标题的(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);

我没有测试任何东西。

Jeff Rupert 14 年前

它正在另一个库中添加,但是 Modernizr <html> 可以告诉您浏览器支持什么的标记。

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

Community CDub 8 年前

:是的。您可以尝试添加一个供应商前缀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浏览器中有效;我正在测试它在其他浏览器中是否有效。悬而未决的。

最终编辑: Andrew Dunn's answer 这样做的方式是可行的(至少在FF和Webkit中,这比我的方法更好)。

tomasdev 13 年前

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

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