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

Question

我想要一些漂亮的圆 Angular 用于我目前正在进行的 Web 元素。

我想我会尝试使用 javascript 而不是 CSS 来完成它，以尽量减少对图像文件的请求(是的，我知道可以将所有需要的圆 Angular 形状组合到一个图像中)并且我还希望能够即时更改背景颜色。

我已经在使用 jQuery，所以我查看了优秀的 rounded corners plugin它在我尝试过的每个浏览器中都非常有效。然而，作为一名开发人员，我注意到有机会提高它的效率。该脚本已经包含用于检测当前浏览器是否支持 webkit 圆 Angular (基于 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 (true) 和 false 中测试过它:Safari、IE7 和 Opera。

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