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

问题描述

我想要尝试使用javascript来完成它，不是CSS，努力保持对图像文件的请求最小（是的，我知道，可以将所有需要的圆角形状合并为一个图像），我也想要能够改变背景颜色几乎在飞。

我已经使用了jQuery，所以我看了优秀的，它的工作方式像在我试过的每个浏览器的魅力。作为一个开发人员，但我注意到了一个更高效的机会。脚本已经包括用于检测当前浏览器是否支持webkit圆角（基于safari的浏览器）的代码。如果是这样，它使用原始CSS而不是创建div的图层。

我认为如果可以执行相同类型的检查以查看浏览器是否支持
$ b 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 guru有更好的解决方案？

（此网页的功能请求位于）

解决方案

如何？

  var mozborderAvailable = false; 
 try {
 if（typeof（document.body.style.MozBorderRadius）！==undefined）{
 mozborderAvailable = true; 
} 
} catch（err）{} 
  

（编辑：更好未定义测试）

I wanted some of those spiffy rounded corners for a web project that I'm currently working on.

I thought I'd try to accomplish it using javascript and not CSS in an effort to keep the requests for image files to a minimum (yes, I know that it's possible to combine all required rounded corner shapes into one image) and I also wanted to be able to change the background color pretty much on the fly.

I already utilize jQuery so I looked at the excellent rounded corners plugin and it worked like a charm in every browser I tried. Being a developer however I noticed the opportunity to make it a bit more efficient. The script already includes code for detecting if the current browser supports webkit rounded corners (safari based browsers). If so it uses raw CSS instead of creating layers of divs.

I thought that it would be awesome if the same kind of check could be performed to see if the browser supports the Gecko-specific -moz-border-radius-* properties and if so utilize them.

The check for webkit support looks like this:

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

That, however, did not work for -moz-border-radius so I started checking for alternatives.

My fallback solution is of course to use browser detection but that's far from recommended practice ofcourse.

My best solution yet is as follows.

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) {}

It's based on the theory that Gecko "expands" the composite -moz-border-radius to the four sub-properties

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

Is there any javascript/CSS guru out there that have a better solution?

(The feature request for this page is at http://plugins.jquery.com/node/3619)

解决方案

How about this?

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

I tested it in Firefox 3 (true) and false in: Safari, IE7, and Opera.

(Edit: better undefined test)

这篇关于检查-moz-border-radius支持的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！