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

我想要一些我正在處理的Web項目的那些漂亮的圓角。檢查-moz-border-radius支持的最佳方法

我想我會嘗試使用JavaScript而不是CSS來完成它，以儘量減少圖像文件的請求（是的，我知道可以將所有需要的圓角形狀組合到一個圖像中）而且我也希望能夠很快地改變背景顏色。

我已經使用jQuery，所以我看着優秀的rounded corners plugin，它在每個我試過的瀏覽器中都像一個魅力。作爲一名開發人員，我注意到有機會讓它更有效率。該腳本已經包含用於檢測當前瀏覽器是否支持webkit圓角（基於Safari瀏覽器）的代碼。如果是這樣，它使用原始的CSS而不是創建div的層。

我認爲這將是可怕的，如果可以執行相同類型的檢查來查看瀏覽器是否支持壁虎專用-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) {}

它是基於這樣的理論：壁虎「擴展」複合萬盎司，邊界半徑四個子屬性

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

有沒有更好的解決方案的任何JavaScript/CSS大師？

（此頁的功能要求是http://plugins.jquery.com/node/3619）

來源

2008-08-20 Markus Olsson

如果您嘗試將未定義的CSS屬性應用於元素，javascript是否會停止執行？ – 2010-01-03 21:30:35

如何使用功能檢測來了解瀏覽器是否支持邊界半徑？ http://stackoverflow.com/questions/5277288/how-to-use-feature-detection-to-know-if-browser-supports-border-radius-includin – Tom 2011-09-14 15:20:46

這個怎麼樣？

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

我在Firefox 3（true）和false中測試了它：Safari，IE7和Opera。

（編輯：更好的未定義測試）

來源

2008-08-21 04:20:47 travis

何不在樣式表中使用-moz-border-radius和-webkit-border-radius？這是有效的CSS，並拋出一個未使用的屬性會比讓javascript做出判斷是否應用它的工作更少。

然後，在javascript中，您只需檢查瀏覽器是否爲IE（或Opera？） - 如果是，它將忽略專有標籤，並且您的JavaScript可以做到這一點。

也許我失去了一些東西在這裏...

來源

2008-08-20 23:34:07

無條件地應用CSS和腳本檢查element.style.MozBorderRadius？

來源

2008-08-21 01:46:12 Nickolay

正如你已經在使用jQuery你可以使用jQuery.browser工具做一些瀏覽器嗅探，然後相應地定位您的CSS/JavaScript的。

來源

2008-08-21 09:03:12

與此相關的問題是，Firefox 2不對邊界使用消除鋸齒。在使用原生圓角之前，該腳本需要檢測Firefox 3，因爲FF3確實使用了抗鋸齒功能。

來源

2008-10-21 17:40:31

我開發了以下方法來檢測瀏覽器是否支持圓角邊框。我還沒有測試它在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; 
};

如果你想測試火狐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; 
    }; 
};

來源

2010-01-03 21:27:16 Cybolic

我知道這是一個老問題，但它的高顯示了在搜索測試邊界半徑的支持，所以我想」把這塊金塊扔到這裏。

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

Attribution

這樣一來，如果沒有支持它，你可以回落，並使用jQuery實現2路滑塊，使其他瀏覽器仍然有類似的視覺體驗。

來源

2010-08-11 13:37:30 vernonk

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

回答

相關問題