Does .css() automatically add vendor prefixes?

Question

I have some code:

$("#" + this.id).css("border-radius",this.radius + "px"); $("#" + this.id).css("-moz-border-radius",this.radius + "px"); $("#" + this.id).css("-webkit-border-radius",this.radius + "px"); 

I am trying to improve lines like this by using JSON to apply them (as shown in jQuery's docs) or by removing the vendor prefix versions completely.

Does jQuery's .css() method automatically apply any required vendor prefixes when changing CSS properties on an element?

Answer 1

As @zeroflagL wrote it appears that since jQuery 1.8.0 .css() does add browser specific prefixes (see this).

In earlier versions this is not done automatically by jQuery's .css(). You will have to do it by yourself or you can use jQuery's .cssHooks() to add vendor prefixes.

Code example from here:

(function($) {   if ( !$.cssHooks ) {     throw("jQuery 1.4.3+ is needed for this plugin to work");     return;   }    function styleSupport( prop ) {     var vendorProp, supportedProp,         capProp = prop.charAt(0).toUpperCase() + prop.slice(1),         prefixes = [ "Moz", "Webkit", "O", "ms" ],         div = document.createElement( "div" );      if ( prop in div.style ) {       supportedProp = prop;     } else {       for ( var i = 0; i < prefixes.length; i++ ) {         vendorProp = prefixes[i] + capProp;         if ( vendorProp in div.style ) {           supportedProp = vendorProp;           break;         }       }     }      div = null;     $.support[ prop ] = supportedProp     return supportedProp;   }    // check for style support of your property    // TODO by user: swap out myCssPropName for css property   var myCssPropName = styleSupport("myCssPropName");    // set cssHooks only for browsers that   // support a vendor-prefixed border radius   if (myCssPropName && myCssPropName !== 'myCssPropName') {     $.cssHooks["myCssPropName"] = {       get: function(elem, computed, extra) {         // handle getting the CSS property         return $.css(elem, myCssPropName);       },       set: function(elem, value) {         // handle setting the CSS value         elem.style[myCssPropName] = value;       }     };   } })(jQuery); 

Answer 2

jQuery DOES add vendor prefixes. It first checks for the presence of the standard property and if it's not found for a vendor prefixed version. From the source:

// return a css property mapped to a potentially vendor prefixed property function vendorPropName( style, name ) {     // shortcut for names that are not vendor prefixed     if ( name in style ) {       return name;      }      // check for vendor prefixed names     ... 

I don't know since which version, but I think 1.8.