title: jQuery adding multiple css properties with same name doesn't work
body: <p>I came across a strange issue with jQuery. It seems that when jQuery is used to add multiple css properties with the same name (for cross browser compatibility), each "duplicate" property, is being overwritten and only the last occurrence is being used.</p>
  
  <p>Example, in pure css, I have this:</p>
  
  <pre><code>div.ellipse {
      background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
      background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
      background-image: -ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
      background-image: -moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
      background-image: -webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
  }
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/Lzhcdr2f/" rel="nofollow">http://jsfiddle.net/Lzhcdr2f/</a></p>
  
  <p>The background image property is used multiple times for cross browser compatibility.</p>
  
  <p>Now I try to apply the above css code using jQuery like this: </p>
  
  <pre><code>$('.ellipse').css({ 
      'background-image': 'radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
      'background-image': '-o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
      'background-image': '-ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
      'background-image': '-moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
      'background-image': '-webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'
  });
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/z9ygxj9j/" rel="nofollow">http://jsfiddle.net/z9ygxj9j/</a></p>
  
  <p>The above code will ONLY work in webkit browsers (chrome/safari), because the last line refers to -webkit browser, and jQuery seems to override properties with the same name and only use the last occurrence.</p>
  
  <p>The only way around, seems to be this:</p>
  
  <pre><code>$('.ellipse').css({'background-image': 'radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'});
  $('.ellipse').css({'background-image': '-ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'});
  $('.ellipse').css({'background-image': '-moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'});
  $('.ellipse').css({'background-image': '-webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'});
  $('.ellipse').css({'background-image': '-o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'});
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/cte7ov36/" rel="nofollow">http://jsfiddle.net/cte7ov36/</a></p>
  
  <p>Is there no way to use the same property multiple times inside the same array?</p>