.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()在更改元素的CSS属性时,jQuery的方法是否会自动应用任何所需的供应商前缀？

Answer 1

正如@zeroflagL所写,似乎因为jQuery 1.8.0 .css()确实添加了浏览器特定的前缀(见此).

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

从代码示例在这里:

(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添加供应商前缀.它首先检查是否存在标准属性,以及是否找不到供应商前缀版本.从来源:

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

Answer 3

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

塞特(.css( propertyName, value ))

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

吸气(.css( propertyName ) )

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

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

请记住,对于速记属性,它在浏览器中不一致:

虽然可以使用某些浏览器,但无法保证检索速记CSS属性(例如,边距,背景,边框).例如,如果要检索渲染border-width,请使用:$( elem ).css( "borderTopWidth" ),$( elem ).css( "borderBottomWidth" )等等.