如果瀏覽器，使用Javascript？

我有一個腳本能夠檢測到某人正在使用的瀏覽器（和版本），並且我想設置它以便對於某些瀏覽器，div類可以在懸停時獲得動畫。我想用jQuery來做這件事，但我對任何東西都是開放的。如果瀏覽器，使用Javascript？

我對JavaScript的想法是這樣的......

if (browser == IE || browser < Firefox 4) { 
     // somehow animate a div class on hover (could be id-based too) 
    } else { 
     // do nothing 
    }

我已經建立了這樣做的CSS是這樣的

.item { 
    height: 100px; 
    width: 100px; 
    /* css3 */ 
    transition: height .5s, width .5s; 
    -moz-transition: height .5s, width .5s; 
    -webkit-transition: height .5s, width .5s; 
} 

.item:hover { 
    height: 200px; 
    width: 200px; 
}

然後將HTML是（顯然）

<div class="item" id="item"> 
    <p>Content here</p> 
</div><!-- end item -->

目的是針對舊版瀏覽器的CSS3修補程序。在我看來，轉換是關於CSS3的最好的事情之一，它讓我非常惱火，IE9不包括對它們的支持。

來源

2011-04-25 JacobTheDev

IE8和IE7也沒有支持他們。我的理解是，IE9不支持它，因爲該功能本身不是最終規範。使用草稿規格的人會很不高興：$ – 2011-04-25 16:27:48

取而代之，如何使用Modernizr庫這樣的東西？

http://www.modernizr.com/

Modernizr的增加了類，讓你可以在你的樣式錶針對特定瀏覽器功能的元素。你實際上並不需要編寫任何Javascript來使用它。

然後你可以做的東西是這樣的：

.multiplebgs div p { 
    /* properties for browsers that 
    support multiple backgrounds */ 
} 
.no-multiplebgs div p { 
    /* optional fallback properties 
    for browsers that don't */ 
}

來源

2011-04-25 16:27:20 Eli

看起來很有希望，我會試一試。 – JacobTheDev 2011-04-25 16:32:49

[Dojo]（http://www.dojotoolkit.org/）做類似的事情。 Dojo爲每種瀏覽器類型定義了特殊的CSS類，允許您定義僅適用於特定瀏覽器的樣式。所以如果你還想要一個提供通用Javascript實用程序的庫，你可以嘗試避免將不同的庫混合在一起。 – ewh 2011-04-26 14:04:41

我喜歡Modernizr的是，它不基於瀏覽器嗅探，它基於特徵檢測。 – Eli 2011-04-26 14:26:33

你打算去一個非常危險的道路在這裏使用的瀏覽器嗅探這樣。

你應該試圖做的是使用功能檢測。在那裏有圖書館，如夢幻般的Modernizr，它可以爲你做到這一點。

來源

2011-04-25 16:27:26

瀏覽器嗅探不是編寫JS代碼的最佳方式。

如果你喜歡的jQuery，這裏是jQuery.browser object

一些例子：

if ($.browser.webkit) { 
    alert("this is webkit!"); 
    } 

var ua = $.browser; 
    if (ua.mozilla && ua.version.slice(0,3) == "1.9") { 
    alert("Do stuff for firefox 3"); 
    } 

if ($.browser.msie) { 
    $("#div ul li").css("display","inline"); 
} else { 
    $("#div ul li").css("display","inline-table"); 
}

來源

2011-04-25 16:30:31

使用$.support檢查瀏覽器是否支持它，甚至沒有與版本檢測一塌糊塗。這有助於未來驗證您的代碼，並更準確地模擬您真正想要做的事情。

事實上，還有已經a jQuery plugin to do this specifically.：d

來源

2011-04-25 16:30:38

看起來不錯，我也會檢查一下。 – JacobTheDev 2011-04-25 16:33:41

你可以做這樣的事情：

<![if (IE 6)|(IE 7)|(IE 8)]--> 
<link type="text/css" rel="stylesheet" href="nocss3.css" /> 
<script type="text/javascript" src="nocss3.js"></script> 
<![endif]-->

來源

2011-04-25 16:32:01 hunter

可以使用檢測和修復支持各種HTML 5和CSS3的庫Modernizer（http://www.modernizr.com）功能在不同的瀏覽器上。

這裏是他們有自己的文檔中對CSS3過渡：
http://www.modernizr.com/docs/#csstransitions

CSS轉換是CSS3的一個非常有用的新零件。使用它們，您可以讓瀏覽器設置爲動畫 - 或，而從另一個狀態轉換爲。你只需要指定一個的開始和結束，而瀏覽器則需要。

在Modernizr中，我們測試CSS 使用具有所有供應商前綴的轉換屬性的轉場。

轉換通常可以使用不使用的Modernizr的特定CSS 類或JavaScript屬性，但對於這些場合您希望您的網站的某些部分的外觀和/或行爲不同它們是可用的。一個很好的示例使用的情況是將Modernizr構建爲動畫引擎，該引擎在瀏覽器中使用原生 CSS轉換，並且依賴於瀏覽器中的動畫。

用法示例：

a { 
    color: #090; 
    -webkit-transition: color .2s ease-out; 
} 
a:focus, 
a:hover { 
    color: #9f9; 
}

來源

2011-04-25 16:33:20 Meligy

你可能在看本教程https://developer.mozilla.org/en/Browser_Detection_and_Cross_Browser_Support

來源

2011-04-25 16:37:19 bogatyrjov

如果瀏覽器，使用Javascript？

回答

相關問題