检查-moz-border-radius支持的最佳方法

Question

我想要一些那些漂亮的圆角用于我正在进行的网络项目.

我以为我会尝试使用javascript而不是CSS来完成它,以便将图像文件的请求保持在最低限度(是的,我知道可以将所有必需的圆角形状组合成一个图像)我也想要能够在飞行中改变背景颜色.

我已经使用了jQuery,所以我看了一下优秀的圆角插件,它在我试过的每个浏览器中都像魅力一样.作为一名开发人员,我注意到有机会让它更有效率.该脚本已包含用于检测当前浏览器是否支持webkit圆角(基于Safari的浏览器)的代码.如果是这样,它使用原始CSS而不是创建div的层.

我认为如果可以执行相同类型的检查以查看浏览器是否支持Gecko特定-moz-border-radius-*属性以及是否支持它们,那将是非常棒的.

对webkit支持的检查如下所示:

var webkitAvailable = false;  
try {  
    webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined);
} 
catch(err) {}

然而,这不起作用,-moz-border-radius所以我开始检查替代品.

我的后备解决方案当然是使用浏览器检测,但这远非推荐的课程实践.

我最好的解决方案如下.

var mozborderAvailable = false;
try {
    var o = jQuery('<div>').css('-moz-border-radius', '1px');
    mozborderAvailable = $(o).css('-moz-border-radius-topleft') == '1px';
    o = null;
} catch(err) {}

它基于Gecko将复合-moz-border-radius"扩展"为四个子属性的理论

• -moz-border-radius-topleft
• -moz-border-radius-topright
• -moz-border-radius-bottomleft
• -moz-border-radius-bottomright

那里有没有javascript/CSS大师有更好的解决方案？

(此页面的功能请求位于http://plugins.jquery.com/node/3619)

Answer 1

这个怎么样？

var mozborderAvailable = false;
try {
  if (typeof(document.body.style.MozBorderRadius) !== "undefined") {
    mozborderAvailable = true;
  }
} catch(err) {}

我在Firefox 3中测试了它(真实),在Safari,IE7和Opera中测试了它.

(编辑:更好的未定义测试)