應用內嵌樣式與瀏覽器的前綴

Question

我發現一個小竅門，讓我使用jQuery樣式添加到一類供應商前綴：

var myTransform = ($.browser.webkit) ? '-webkit-transform' : 
         ($.browser.mozilla) ? '-moz-transform' : 
         ($.browser.msie) ? '-ms-transform' : 
         ($.browser.opera) ? '-o-transform' : 'transform'; 

var myCSSObj = {}; 

    myCSSObj[myTransform] = 'translate('+centrepos+'px, 0px)'; 
     $("div.current").css(myCSSObj); 

我不能完全肯定這是如何工作的，所以如果有人可以解釋我會非常感激。

但是，我的問題是關於應用此方法並將其添加到jQuery片段的內聯樣式。目前，我有以下，但它是手工編寫的：

$fragment = $('<div class="preload" style="position: relative; -webkit-transform: translate('+start+'px, 0px);"/>'); 

我想，當它被添加到DOM給這個容器的初始位置。如何添加代碼而無需手動添加每個瀏覽器的前綴？

Answer 1

如果我正確地理解了它，您希望自動添加供應商特定的前綴到您的CSS屬性的過程。

jquery core中包含一個API，允許您執行此操作。

在文檔中有一個很好的例子，可以爲border-radius做類似的想法。

Answer 2

看到這個的jsfiddle這裏：

http://jsfiddle.net/molokoloco/f6Z3D/

Answer 3

您可以檢查出利·貝羅的無前綴：http://leaverou.github.com/prefixfree/

- 前綴，免費讓你使用只前綴的CSS屬性無處不在。它在幕後工作，只在需要時纔將當前瀏覽器的前綴添加到任何CSS代碼中。