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

Question

我有一些代码：

$("#" + 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");

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

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

Answer 1

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

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

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

吸气剂 (.css( propertyName ))

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

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

请记住，速记属性在浏览器中是不一致的：

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

Answer 2

正如@zeroflagL 所写，自 jQuery 1.8.0 以来，.css() 确实添加了特定于浏览器的前缀 (see this)。

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

来自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 3

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

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