web-dev-qa-db-fra.com

Est-ce que .css () ajoute automatiquement des préfixes de fournisseur?

J'ai du 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");

J'essaie d'améliorer des lignes comme celle-ci en utilisant JSON pour les appliquer (comme indiqué dans les documents de jQuery) ou en supprimant complètement les versions de préfixe du fournisseur.

La méthode .css() de jQuery applique-t-elle automatiquement les préfixes de fournisseur requis lors de la modification des propriétés CSS sur un élément?

javascriptjquerycssvendor-prefix
37
Jamesking56

Comme l'a écrit @zeroflagL, il semble que depuis jQuery 1.8.0 .css() ajoute des préfixes spécifiques au navigateur ( voir ceci ).

Dans les versions antérieures, cela n'était pas fait automatiquement par la fonction .css() de jQuery. Vous devrez le faire vous-même ou vous pouvez utiliser .cssHooks() de jQuery pour ajouter des préfixes de fournisseurs.

Exemple de code de ici : 

(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);
51
Yotam Omer

jQuery ajoute des préfixes de fournisseur. Il vérifie d'abord la présence de la propriété standard et s'il n'est pas trouvé pour une version préfixée du fournisseur. De la source:

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

Je ne sais pas depuis quelle version, mais je pense que 1.8.

11
a better oliver

Ceci est maintenant confirmé dans les documents officiels: http://api.jquery.com/css/

Setter (.css( propertyName, value ))

Depuis jQuery 1.8, le setter .css() se charge automatiquement de préfixer le nom de la propriété. Par exemple, prenez .css( "user-select", "none" ) dans Chrome/Safari le définira comme -webkit-user-select, Firefox utilisera -moz-user-select Et IE10 utilisera -ms-user-select.

Getter (.css( propertyName ))

La méthode .css() est un moyen pratique d'obtenir une propriété de style calculée à partir du premier élément correspondant, en particulier à la lumière des différentes manières dont les navigateurs accèdent à la plupart de ces propriétés (la méthode getComputedStyle() dans les normes basés sur les navigateurs par rapport aux propriétés currentStyle et runtimeStyle dans Internet Explorer avant la version 9) et les différents termes que les navigateurs utilisent pour certaines propriétés. Par exemple, l'implémentation DOM d'Internet Explorer fait référence à la propriété float comme styleFloat, tandis que les navigateurs conformes aux normes W3C y font référence comme cssFloat. Par souci de cohérence, vous pouvez simplement utiliser "float", Et jQuery le traduira à la valeur correcte pour chaque navigateur.

Il ne mentionne pas explicitement les préfixes de fournisseurs dans le contexte getter, mais il est facile à tester. Par exemple, $element.css('border-radius') on Chrome renvoie les valeurs définies comme border-radius Ou -webkit-border-radius Et ignore les valeurs définies comme -moz-border-radius.

Gardez juste à l'esprit qu'il est incohérent entre les navigateurs pour les propriétés de raccourci:

La récupération des propriétés CSS abrégées (par exemple, marge, arrière-plan, bordure), bien que fonctionnelle avec certains navigateurs, n'est pas garantie. Par exemple, si vous souhaitez récupérer le border-width Rendu, utilisez: $( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth" ), etc.

6
user56reinstatemonica8