Question

162

Does .css() automatically add vendor prefixes?

rated 0 times [ 165] [ 3] / answers: 1 / hits: 16379 / 11 Years ago, fri, july 5, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

karivictoriab

Add To Favorites

Follow

Total Points: 530

Total Questions: 90

Total Answers: 95

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

karivictoriab questions

1 JSX props should not use arrow functions eslint warning

Wed, Feb 10, 21, 00:00, 3 Years ago

1 How to scroll and expand an Accordion by onClick on an icon from a component?

Fri, Aug 21, 20, 00:00, 4 Years ago

1 Hide all labels and tooltips in Chart.js and make it very small size

Wed, Apr 8, 20, 00:00, 4 Years ago

1 CORS – Cross Origin Request Blocked – The 'Access-Control-Allow-Origin' header contains invalid value

Fri, Jan 24, 20, 00:00, 4 Years ago

1 VueJs clear form after success

Mon, Dec 30, 19, 00:00, 4 Years ago

View All

answered 11 Years ago johannatorim · Accepted Answer

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);