jquery cross browser css3 inline style

Problem

It is possible to get something like this from jquery?

<div id="test" style="background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
background: -moz-linear-gradient(top, #2F2727, #1a82f7);"/>

When I use:

$("#test").css({
   'background': '-webkit-linear-gradient(top, #2F2727, #1a82f7)',
   'background': '-moz-linear-gradient(top, #2F2727, #1a82f7)'
});

the result is (in chrome)

<div id="test" style="background: -webkit-linear-gradient(top, #2F2727, #1a82f7); "/>
Problem courtesy of: galer88

Solution

That is not possible in jQuery, because the keys cannot be duplicated. You have to use $.cssHooks or:

$("#test").css('background', '-webkit-linear-gradient(top, #2F2727, #1a82f7)')
          .css('background', '-moz-linear-gradient(top, #2F2727, #1a82f7)');

Instead of setting fixed styles using style, I recommend to use the *Class functions: addClass, removeClass and toggleClass.

As for the HTML, you have to use the style attribute:

<div id="test" style="background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
 background: -moz-linear-gradient(top, #2F2727, #1a82f7);"/>
Solution courtesy of: Rob W

Discussion

No, and you shouldn't need to. You can't have multiple values for a single CSS property. That works directly in CSS because the duplicate properties overwrite each other, and in this case is dependent upon the browser. Basically, with that CSS, webkit-based browsers see the webkit-specific property and apply it, then see an unknown property and ignore it. Gecko-based browsers will see an unknown property and ignore it, then see a Mozilla-specific property and apply it.

Try your code in Firefox - I bet it will work just fine, except that it will show the Mozilla property instead of the webkit one.

Also, if this is supposed to be CSS3, you should be able to just use the linear-gradient instead of the vendor-specific ones, and then it'll work in all CSS3-compatible browsers as well.

EDIT: Well except linear-gradient isn't actually supported. So instead you should use those vendor-specific values and additionally use -ms-linear-gradient to support IE, -o-linear-gradient to support Opera, and also use linear-gradient for future compatibility. ;)

Discussion courtesy of: Ryan P

This recipe can be found in it's original form on Stack Over Flow.