javascript – 检查-moz-border-radius支持的最佳方式

我想要一些我正在开展工作的网络项目的那些尖锐的圆角.

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

我已经使用了jQuery,所以我看了出色的rounded corners plugin,它在每一个浏览器中都有一个魅力.作为开发人员,我注意到有机会使其更有效率.该脚本已经包括用于检测当前浏览器是否支持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)

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