Может ли .css() автоматически добавлять префиксы поставщика?

Ответ 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);

Ответ 2

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.

Ответ 3

Это подтверждено в официальных документах: http://api.jquery.com/css/

Сеттер (.css( propertyName, value ))

Как и в jQuery 1.8, установщик .css() автоматически позаботится о префиксах имени свойства. Например, возьмите .css( "user-select", "none" ) в Chrome/Safari, установите его как -webkit-user-select, Firefox будет использовать -moz-user-select, а IE10 будет использовать -ms-user-select.

Getter (.css( propertyName ))

Метод .css() - это удобный способ получить вычисленное свойство стиля из первого совпадающего элемента, особенно в свете различных способов доступа браузеров к большинству этих свойств (метод getComputedStyle() в браузерах на основе стандартов по сравнению с currentStyle и runtimeStyle свойства в Internet Explorer до версии 9) и различные термины, используемые браузерами для определенных свойств. Например, реализация DOM в Internet Explorer относится к свойству float как styleFloat, в то время как браузеры, совместимые со стандартами W3C, относятся к нему как cssFloat. Для согласованности вы можете просто использовать "float", а jQuery переведет его на правильное значение для каждого браузера.

В нем явно не упоминаются префиксы поставщиков в контексте getter, но их легко проверить. Например, $element.css('border-radius') в Chrome возвращает значения, установленные как border-radius или -webkit-border-radius, и игнорирует значения, установленные как -moz-border-radius.

Просто имейте в виду, что он несовместим между браузерами для стенографических свойств:

Получение сокращенных CSS-свойств (например, margin, background, border), хотя и работает с некоторыми браузерами, не гарантируется. Например, если вы хотите получить рендер border-width, используйте: $( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth" ) и т.д.