javascript - prefixer - vendor prefixes

¿.Css() agrega automáticamente prefijos de proveedor?

Question

Tengo un código:

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

Estoy tratando de mejorar las líneas de este tipo usando JSON para aplicarlas (como se muestra en los documentos de jQuery) o eliminando por completo las versiones del prefijo del proveedor.

¿El método .css() jQuery aplica automáticamente los prefijos de proveedor requeridos cuando se cambian las propiedades de CSS en un elemento?

Answer 1

Como escribió @zeroflagL, parece que desde jQuery 1.8.0 .css() se agregan prefijos específicos del navegador ( ver esto ).

En versiones anteriores, jQuery''s .css() no lo hace automáticamente. Tendrá que hacerlo usted mismo o puede usar .cssHooks() jQuery para agregar prefijos de proveedor.

Ejemplo de código desde 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

Esto ahora se confirma en los documentos oficiales: http://api.jquery.com/css/

Setter ( .css( propertyName, value ) )

A partir de jQuery 1.8, el setter .css() encargará automáticamente de ponerle un prefijo al nombre de la propiedad. Por ejemplo, tome .css( "user-select", "none" ) en Chrome / Safari lo configurará como -webkit-user-select , Firefox usará -moz-user-select , e IE10 usará -ms-user-select

Getter ( .css( propertyName ) )

El método .css() es una forma conveniente de obtener una propiedad de estilo computada del primer elemento coincidente, especialmente a la luz de las diferentes maneras en que los navegadores acceden a la mayoría de esas propiedades (el método getComputedStyle() en navegadores basados ​​en estándares versus el estilo currentStyle y propiedades runtimeStyle en Internet Explorer anteriores a la versión 9) y los diferentes términos que usan los navegadores para ciertas propiedades. Por ejemplo, la implementación DOM de Internet Explorer se refiere a la propiedad float como styleFloat , mientras que los navegadores compatibles con los estándares W3C se refieren a ella como cssFloat . Para mayor coherencia, simplemente puede usar "float" , y jQuery lo traducirá al valor correcto para cada navegador.

No menciona explícitamente los prefijos del vendedor en el contexto getter, pero es fácil de probar. Por ejemplo, $element.css(''border-radius'') en Chrome devuelve los valores establecidos como border-radius o -webkit-border-radius e ignora los valores establecidos como -moz-border-radius .

Solo tenga en cuenta que no es uniforme en todos los navegadores para las propiedades abreviadas:

La recuperación de las propiedades abreviadas de CSS (por ejemplo, margen, fondo, borde), aunque funcional con algunos navegadores, no está garantizada. Por ejemplo, si desea recuperar el border-width representado, use: $( elem ).css( "borderTopWidth" ) , $( elem ).css( "borderBottomWidth" ) , y así sucesivamente.

Answer 3

jQuery SÍ agrega prefijos de proveedor. Primero verifica la presencia de la propiedad estándar y si no se encuentra para una versión prefijada del proveedor. De la fuente:

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

No sé desde qué versión, pero creo que 1.8.