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

у меня есть код:

$("#" + 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) или полностью удалив версии префикса поставщика.

делает jQuery .css() метод автоматически применяет любые необходимые префиксы поставщика при изменении свойств CSS на элементе?

32
css3 javascript jquery vendor-prefix

3 ответов

как написал @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);
47

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.

12

это теперь подтверждено в официальных документах: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) и различные термины, используемые браузерами для определенных свойств. Например, реализация DOM Internet Explorer ссылается на свойство float как styleFloat, в то время как браузеры, совместимые со стандартами W3C, ссылаются ему как cssFloat. Для согласованности вы можете просто использовать "float", и jQuery переведет его на правильное значение для каждого браузера.

он явно не упоминает префиксы поставщиков в контексте геттера, но его легко проверить. Например, $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" ) и так далее.

5