javascript .css() 会自动添加供应商前缀吗？

Does .css() automatically add vendor prefixes?

提问by Jamesking56

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.

我试图通过使用 JSON 来应用它们（如 jQuery 的文档中所示）或完全删除供应商前缀版本来改进这样的行。

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

.css()更改元素上的 CSS 属性时，jQuery 的方法是否会自动应用任何必需的供应商前缀？

回答by Yotam Omer

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

正如@zeroflagL 所写，似乎因为 jQuery 1.8.0.css()确实添加了浏览器特定的前缀（请参阅此）。

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.

在早期版本中，这不是由 jQuery 的.css(). 您必须自己完成，或者您可以使用 jQuery.cssHooks()添加供应商前缀。

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

回答by a better oliver

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:

jQuery 确实添加了供应商前缀。它首先检查标准属性是否存在，如果没有找到带有供应商前缀的版本。从来源：

// 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.

我不知道从哪个版本开始，但我认为是 1.8。

回答by user56reinstatemonica8

This is now confirmed in the official docs: http://api.jquery.com/css/

这现在在官方文档中得到确认：http: //api.jquery.com/css/

Setter ( .css( propertyName, value ))

二传手 ( .css( propertyName, value ))

As of jQuery 1.8, the .css()setter will automatically take care of prefixing the property name. For example, take .css( "user-select", "none" )in Chrome/Safari will set it as -webkit-user-select, Firefox will use -moz-user-select, and IE10 will use -ms-user-select.

从 jQuery 1.8 开始，.css()setter 将自动处理属性名称的前缀。例如，.css( "user-select", "none" )在 Chrome/Safari 中将其设置为-webkit-user-select，Firefox 将使用-moz-user-select，而 IE10 将使用-ms-user-select。

Getter ( .css( propertyName ))

吸气剂 ( .css( propertyName ))

The .css()method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the getComputedStyle()method in standards-based browsers versus the currentStyleand runtimeStyleproperties in Internet Explorer prior to version 9) and the different terms browsers use for certain properties. For example, Internet Explorer's DOM implementation refers to the float property as styleFloat, while W3C standards-compliant browsers refer to it as cssFloat. For consistency, you can simply use "float", and jQuery will translate it to the correct value for each browser.

该.css()方法是一种从第一个匹配元素中获取计算样式属性的便捷方法，特别是考虑到浏览器访问大多数这些属性的不同方式（getComputedStyle()基于标准的浏览器中的方法与版本 9 之前的 Internet Explorer 中的currentStyle和runtimeStyle属性) 以及浏览器对某些属性使用的不同术语。例如，Internet Explorer 的 DOM 实现将 float 属性称为styleFloat，而符合 W3C 标准的浏览器将其称为cssFloat。为了保持一致性，您可以简单地使用"float"，jQuery 会将其转换为每个浏览器的正确值。

It doesn't explicitly mention vendor prefixes in the getter context but it's easy to test. For example, $element.css('border-radius')on Chrome returns values set as border-radiusor -webkit-border-radiusand ignores values set as -moz-border-radius.

它没有在 getter 上下文中明确提及供应商前缀，但很容易测试。例如，$element.css('border-radius')在 Chrome 上返回设置为border-radiusor 的-webkit-border-radius值并忽略设置为 的值-moz-border-radius。

Just keep in mind that it's inconsistent across browsers for shorthand properties:

请记住，它在浏览器之间的速记属性不一致：

Retrieval of shorthand CSS properties (e.g., margin, background, border), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered border-width, use: $( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth" ), and so on.

检索速记 CSS 属性（例如，边距、背景、边框）虽然在某些浏览器中有效，但不能保证。例如，如果要检索渲染的border-width，请使用: $( elem ).css( "borderTopWidth" )、$( elem ).css( "borderBottomWidth" )等。