Setting -os-/-ms prefix for background gradient in jQuery fails to work?

Question

I\'ve seen a couple of other posts on here in regards to jQuery .css() not working with -webkit-gradient, however I\'ve yet to find one pertaining

Answer 1

You're setting and re-setting the background property of the JavaScript object again and again.

In the end, if you try logging the object you're passing to .css(), you'll see it only contains 2 properties: The last background value in the list, and filter.

So your code is equivalent to:

$(elem).css({
    'background': 'linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
    'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr=\''+a+'\', endColorstr=\''+b+'\',GradientType=0 )'
});

You can try something like this instead (jsfiddle demo):

var i, l, backgrounds = [
    '-moz-linear-gradient(top,  '+a+' 0%, '+b+' 100%)', 
    '-webkit-gradient(linear, left top, left bottom, color-stop(0%,'+a+'), color-stop(100%,'+b+'))',
    '-webkit-linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
    '-o-linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
    '-ms-linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
    'linear-gradient(top,  '+a+' 0%,'+b+' 100%)'
];

// Try each background declaration, one at a time
// Like in a stylesheet, the browser should(!) ignore those
// it doesn't understand.
for( i = 0, l = backgrounds.length ; i < l ; i++ ) {
    $(elem).css({ background: backgrounds[i] });
}

$(elem).css({
    'filter': "progid:DXImageTransform.Microsoft.gradient( startColorstr='"+a+"', endColorstr='"+b+"',GradientType=0 )"
});

This code is of course not very efficient at all. And for browsers that understand more than one of the declarations, it'll pointlessly overwrite those that work already. So optimize as you see fit.