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

StackOverflow https://stackoverflow.com/questions/18077

  •  09-06-2019
  •  | 
  •  

题

我想要为我目前正在开发的一个网络项目提供一些漂亮的圆角。

我想我会尝试使用 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)

有帮助吗？

解决方案

这个怎么样？

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

我在 Firefox 3 中测试了它（true），在以下版本中测试为 false：Safari、IE7 和 Opera。

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

其他提示

我知道这是一个较老的问题，但它在测试边界半径支持的搜索中显示很高，所以我想我应该把这个金块放在这里。

Rob Glazebrook 有一个小片段，它扩展了 jQuery 的支持对象，以对 border-radius 支持（还有 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 向滑块，以便其他浏览器仍然具有类似的视觉体验。

为什么不使用 -moz-border-radius 和 -webkit-border-radius 在样式表中？它是有效的 CSS，抛出一个未使用的属性比让 javascript 执行确定是否应该应用它的跑腿工作造成的伤害要小。

然后，在 javascript 中，您只需检查浏览器是否是 IE（或 Opera？） - 如果是，它将忽略专有标签，并且您的 javascript 可以做到这一点。

也许我在这里遗漏了一些东西......

无条件应用 CSS 并检查 element.style.MozBorderRadius 在脚本中？

由于您已经在使用 jQuery，因此您可以使用 jQuery.浏览器 实用程序进行一些浏览器嗅探，然后相应地定位您的 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 年第一季度发布的，所以我们假设 5 月是当然。

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;
  };
};
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top