Geek Answers Handbook

Using inline styles with browser prefixes

I found a little trick that allows me to use jquery to add styles to a class with vendor prefixes:

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

I'm not quite sure how this works, so if someone can explain, I would be very grateful.

But, my question is to apply this method and add it to the inline style of the jquery fragment. I currently have the following, but it is written by hand:

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

I want to give this container an initial position when it is added to dom. How can I add code without having to manually add each browser prefix?

0
source share
3 answers

, css.

jquery API, . jQuery.cssHooks

, border-radius.

+1

lea verou : http://leaverou.github.com/prefixfree/

-prefix-free CSS . , CSS-, .

0

More articles:


All Articles