Question

How do you specify browser-specific fallbacks for css properties in jquery?

E.g. I want to do the equivalent of

h1 {
  background-image: -webkit-linear-gradient(left, white, black);
  background-image: -moz-linear-gradient(left, white, black);
  background-image: -o-linear-gradient(left, white, black);
  background-image: -ms-linear-gradient(left, white, black);
}

• $('h1').css({'background-image': x, 'background-image': y}) — js syntax of course will allow only one ‘background-image’ key.
• $('h1').css('background-image', x).css('background-image', y) — jquery will overwrite the first value.
• $('h1').css('background-image', x + ',' + y) — browser doesn’t like it.

Answer 1

You can ask the browser which prefix it wants by applying your CSS to an element and then reading back the value – $('h1').css('background-image'); You can then use the returned value to know what prefix to use when you set the background-image later.

Better yet, you could take advantage of jQuery’s CSS hooks to normalize all calls to .css. There’s a great set of hooks here; you’re probably interested in the gradients hook.

Once the hook is installed, it’s as easy as:

$(selector).css('background-image','linear-gradient(x,y,z)');