Install all css3 background-image using jquery

Question

hi I want to set background-image for all browsers using jquery:

 background-image:linear-gradient(green, blue); /* Norme W3C */ background-image:-moz-linear-gradient(green, blue); /* Firefox */ background-image:-webkit-gradient(linear, green, blue); /* Chrome, Safari */ background-image:-o-linear-gradient(green, blue); /* Opera */ background-image:-ms-linear-gradient(green, blue); /* IE */ 

and I installed it like this:

$("#"+elmt).css("background-image" , "linear-gradient("+hex+","+$('#test2').val()+")" );

W3C only, but it works on firefox but not in Chrome.

How to set all these settings?

Answer 1

From jQuery 1.8 Release

CSS auto prefix. When you use the CSS property, in .css () or .animate (), use the correct prefix property (if necessary) for this browser. For example, take .css ("user-select", "none"); in Chrome / Safari, set the value to -webkit-user-select, Firefox will use -moz-user-select, and IE10 will use -ms-user-select.

Update to the latest version and this should be done automatically.

Edit

This should work automatically, the following should be implemented in jQuery 1.8,

 var cssPrefixString = {}; var cssPrefix = function(propertie) { if (cssPrefixString[propertie] || cssPrefixString[propertie] === '') return cssPrefixString[propertie] + propertie; var e = document.createElement('div'); var prefixes = ['', 'Moz', 'Webkit', 'O', 'ms', 'Khtml']; // Various supports... for (var i in prefixes) { if (typeof e.style[prefixes[i] + propertie] !== 'undefined') { cssPrefixString[propertie] = prefixes[i]; return prefixes[i] + propertie; } } return false; }; 

Using

 var cssTransform = cssPrefix('Transform'); // "MozTransform" or "WebkitTransform" if (cssTransform ) { var cssProp = {}; cssProp['border'] = '1px solid rgba(0, 0, 0, .5)'; cssProp[cssPrefix('Transform')] = 'rotate(20deg)'; cssProp[cssPrefix('borderRadius')] = '5px'; // Keep the camelCaze (jQuery like) cssProp[cssPrefix('boxShadow')] = '2px 2px 6px grey'; $('div#myDiv').css(cssProp); // console.log(cssProp); } 

What came from the link - working jsFiddle

So, one of these two methods should work for you.

Answer 2

Instead, you can simply use -prefix-free : http://leaverou.github.com/prefixfree/

It dynamically adds provider prefixes to your CSS.