Hacer.css () ¿agregar automáticamente prefijos de proveedor?

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 líneas como esta usando JSON para aplicarlas (como se muestra en los documentos de jQuery) o eliminando las versiones de prefijo de proveedor por completo.

¿El método .css() de jQuery aplica automáticamente los prefijos de proveedor necesarios al cambiar las propiedades CSS de un elemento?

Author: Yotam Omer, 2013-07-05
Source

3 answers

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

En versiones anteriores esto no se hace automáticamente por .css() de jQuery. Tendrás que hacerlo tú mismo o puedes usar jQuery .cssHooks() para agregar prefijos de proveedor.

Ejemplo de Código de aquí:

(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);
 47
Author: Yotam Omer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-07 14:56:10

JQuery añade prefijos de proveedor. Primero comprueba la presencia de la propiedad estándar y si no se encuentra para una versión con prefijo de 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 se desde que versión, pero creo que 1.8.

 12
Author: a better oliver,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-05 14:05:33

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

Setter ( .css( propertyName, value ) )

A partir de jQuery 1.8, el configurador .css() se encargará automáticamente de prefijar el nombre de la propiedad. Por ejemplo, tome .css( "user-select", "none" ) en Chrome/Safari lo establecerá 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 calculada de la primera elemento coincidente, especialmente a la luz de las diferentes formas en que los navegadores acceden a la mayoría de esas propiedades (el método getComputedStyle() en navegadores basados en estándares versus las propiedades currentStyle y runtimeStyle en Internet Explorer antes de la versión 9) y los diferentes términos que los navegadores usan 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 de proveedor 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 es inconsistente entre los navegadores para las propiedades taquigráficas:

Recuperación de propiedades CSS taquigráficas (por ejemplo, margen, fondo, borde), aunque funcional con algunos navegadores, no está garantizado. Por ejemplo, si desea recuperar el border-width renderizado, utilice: $( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth" ), y así sucesivamente.

 5
Author: user568458,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-14 22:06:43