如何使用javascript /條件​​註釋測試瀏覽器對css3的兼容性？

Question

我知道我的網站在IE7和IE6中看起來很糟糕。我只好承認它。
要找到使用條件註釋的IE，是<!-- IF (IE) -->或沿着這些線。

但是，如果用戶通過其他瀏覽器訪問我的網站，說Firefox 4（他們仍然在我的學校使用它），我該如何檢測？

我想要做的是檢查瀏覽器是否支持border-radius，如果不支持，則加載基本樣式而不是高級樣式。那麼我怎麼能在javascript /條件​​註釋中做到這一點？

謝謝

Answer 1

不用擔心瀏覽器。擔心功能。使用Modernizr並測試特定功能。它會將類添加到您可以在CSS中使用的html元素以相應地設置您的網站樣式。

http://modernizr.com/

Answer 2

你可能看使用Modernizr的，這can test border-radius和大約一百萬的東西。

或者，這裏只是爲border-radius（從this great list by kangax）一個獨立的測試：

var hasBorderRadius = (function(){ 
    var docEl = document.documentElement, s; 
    if (docEl && (s = docEl.style)) { 
    return (typeof s.borderRadius == 'string' 
     || typeof s.MozBorderRadius == 'string' 
     || typeof s.WebkitBorderRadius == 'string' 
     || typeof s.KhtmlBorderRadius == 'string'); 
    } 
    return false; 
})(); 

的hasBorderRadius標誌將是true如果這樣做，或者false如果它不。

同樣的技術可以用於其他新的CSS3屬性（也可以用input元素上的placeholder），請參閱上面的鏈接。但是，如果你需要的不僅僅是一個，不要重新發明輪子，使用工具。