检查-moz-border-radius支持的最佳方法
我想要一些我目前正在从事的Web项目的漂亮圆角。
我认为我会尝试使用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)
解决方案
回答
为什么不在样式表中使用-moz-border-radius和-webkit-border-radius？它是有效的CSS，并且抛出其他未使用的属性所带来的伤害要比让javascript搞清楚是否应该应用它所带来的麻烦小得多。
然后，在javascript中，我们只需检查浏览器是否为IE(或者Opera？)，它就会忽略专有标签，而javascript可以做到这一点。
也许我在这里错过了一些东西...
回答
无条件应用CSS并在脚本中检查element.style.MozBorderRadius？
回答
这个怎么样？
var mozborderAvailable = false;
try {
if (typeof(document.body.style.MozBorderRadius) !== "undefined") {
mozborderAvailable = true;
}
} catch(err) {}
我在Firefox 3中对它进行了测试(true)，在Safari，IE7和Opera中对它进行了测试。
(编辑：更好的未定义测试)
回答
由于我们已经在使用jQuery，因此可以使用jQuery.browser实用程序进行浏览器嗅探，然后相应地定位CSS / JavaScript。
回答
问题在于，Firefox 2不对边框使用抗锯齿功能。该脚本需要先检测Firefox 3，然后才能使用本机圆角，因为FF3确实使用了抗锯齿功能。
回答
我已经开发了以下方法来检测浏览器是否支持圆角边框。我尚未在IE(Linux计算机上)上对其进行测试，但它在Webkit和Gecko浏览器(即Safari / Chrome和Firefox)以及Opera中都能正常运行：
function checkBorders() {
var div = document.createElement('div');
div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
return true;
};
return false;
};
如果要测试Firefox 2或者3，则应检查Gecko渲染引擎，而不是实际的浏览器。我找不到Gecko 1.9(支持抗锯齿圆角的版本)的确切发布日期，但是Mozilla Wiki表示它是在2007年第一季度发布的，因此我们假设May可以是当然。
if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 )
总而言之，组合功能是这样的：
function checkBorders() {
if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 ) {
return true;
} else {
var div = document.createElement('div');
div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
return true;
};
return false;
};
};
回答
我知道这是一个较旧的问题，但是在测试边界半径支持的搜索中显示出来很高，因此我认为我会在这里提出这个建议。
Rob Glazebrook的代码片段扩展了jQuery的支持对象，可以很好地快速检查边界半径支持(也包括moz和web-kit)。
jQuery(function() {
jQuery.support.borderRadius = false;
jQuery.each(['BorderRadius','MozBorderRadius','WebkitBorderRadius','OBorderRadius','KhtmlBorderRadius'], function() {
if(document.body.style[this] !== undefined) jQuery.support.borderRadius = true;
return (!jQuery.support.borderRadius);
}); });
归因
这样，如果不支持它，则可以后退并使用jQuery来实现2向滑块，以便其他浏览器仍然具有类似的视觉体验。
