Declaring CSS3 Gradient with jQuery

Question

I am adding a css3 gradient to a button. I think jQuery is combining all of my cross-browser 'background-image' declarations as just one declaration (the last 'background-image' that it finds). Is there a better way to write the jQuery so it presents to the browser all the cross-browser css as it normally would?

Here is my jQuery:

        $('.button').css({
        'background-color' : FromGradientColor ,
        'background-image' : '-webkit-gradient(linear, 0% 0%, 0% 100%, from('+ FromGradientColor +'), to('+ ToGradientColor +'))' ,
        'background-image' : '-webkit-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' ,
        'background-image' : '-moz-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' ,
        'background-image' : '-ms-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' ,
        'background-image' : '-o-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' 
    });

This is what I want jQuery to present to the browser (except the colors which are determined by my variables in jQuery):

background-color: #ddd;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
text-shadow: 0 1px 0 rgba(255,255,255,.8);

Exact duplicate of [Build JavaScript Object to use with jQuery .css() (what about duplicate keys?)](http://stackoverflow.com/questions/8457388/build-javascript-object-to-use-with-jquery-css-what-about-duplicate-keys). Unless the styles have to applied dynamically, I recommend to use a CSS preprocessor, such as [LESS](http://lesscss.org) or [SASS](http://sass-lang.org/). — Rob W, Jun 15 '12 at 17:35
Agree with Rob... However you you really want to do it this way you should be able to determine which rendering engine youre in using JS and then only apply one of the gradient properties... — prodigitalson, Jun 15 '12 at 17:44
I am familiar with Less however never used it with jquery. Is it possible to use Less within jQuery? — infatti, Jun 15 '12 at 19:50

Paul Sweatte · Answer 1 · 2016-01-31T09:36:00.357

Put the styles into a class, such as this less example:

@bgcolor: #ddd;

.gradient(@from: #eee, @to: #ccc) 
  {
  background-color: @bgcolor; 
  background-image: -webkit-linear-gradient(top, @from, @to); 
  background-image: -moz-linear-gradient(top, @from, @to); 
  background-image: -ms-linear-gradient(top, @from, @to); 
  background-image: -o-linear-gradient(top, @from, @to); 
  filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=@{from}, endColorstr=@{to})"; 
  -ms-filter: "'progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=@{from}, endColorstr=@{to})'"; 
  }

Then reference it as such:

$('.button').addClass("gradient")

Declaring CSS3 Gradient with jQuery

1 Answers1