hi I want to set the background-image
for all browser with 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 set it like that :
$("#"+elmt).css("background-image" , "linear-gradient("+hex+","+$('#test2').val()+")" );
only for W3C but it work on firefox but not on Chrome.
How can I set all this setting?
From the jQuery 1.8 Blog's release
Automatic CSS prefixing: When you use a CSS property, in either .css() or .animate(), we'll use the correct prefixed property (when appropriate) for that browser. For example, take .css("user-select", "none"); in Chrome/Safari we'll set the value as "-webkit-user-select", Firefox will use "-moz-user-select", and IE10 will use "-ms-user-select".
Upgrade to the latest version and this should be handled 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;
};
The usage
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);
}
Which came from the link -- a working jsFiddle
So one of these two methods should work for you.
You could instead just use -prefix-free : http://leaverou.github.com/prefixfree/
It dynamically adds vendor prefixes to your CSS.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.