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 to -ms-linear-gradient, -o-linear-gradient and linear-gradient.

Long story short, I’ve created a function which sets a #hex based background gradient for an element using the all the most popular CSS properties for cross-browser compatibility, taken directly from ColorZilla.

Here’s a look at the particular snippet I’m talking about:

$(elem).css({
        'background': b,
        'background': '-moz-linear-gradient(top,  '+a+' 0%, '+b+' 100%)', 
        'background': '-webkit-gradient(linear, left top, left bottom, color-stop(0%,'+a+'), color-stop(100%,'+b+'))',
        'background': '-webkit-linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
        'background': '-o-linear-gradient(top,  '+a+' 0%,'+b+' 100%)', // Breaks execution
        'background': '-ms-linear-gradient(top,  '+a+' 0%,'+b+' 100%)', // Breaks execution
        'background': 'linear-gradient(top,  '+a+' 0%,'+b+' 100%)', // Breaks execution
        'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr=\''+a+'\', endColorstr=\''+b+'\',GradientType=0 )'
        });

I’ve placed a //breaks execution comment next to each of the properties that when active (either collectively, or individually) break the script’s execution (no other properties, e.g. background: b (b of course being a variable) are set.

I’m absolutely stumped as to why this is.

So far I’ve tried:

• Using double quotes instead of single quotes.
• Replacing the variable usage (+a+, +b+) with actual hex’s.

I’m thinking perhaps there’s a character in those three that needs to be escaped or something?

Any help towards figuring out why this is would be greatly appreciated!

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.