jQuery.cssHooks

Объект $.cssHooks предоставляет способ определения функций для получения и установки определённых значений CSS. Он также может использоваться для создания новых cssHooks для нормализации функций CSS3, таких как тени и градиенты.

Например, некоторые версии браузеров на основе Webkit требуют -webkit-border-radius для установки border-radius элемента, в то время как более ранние версии Firefox требуют -moz-border-radius. Css-хук может нормализовать эти префиксы поставщиков, чтобы .css() принимал одно стандартное имя свойства (border-radius, или с синтаксисом свойства DOM, borderRadius).

Помимо предоставления точного контроля над тем, как обрабатываются отдельные свойства стиля, $.cssHooks также расширяет набор свойств, доступных для метода .animate().

Определение нового css-хука простое. Приведённый ниже шаблон скелета может служить руководством для создания собственного.

(function( $ ) {
 
// First, check to see if cssHooks are supported
if ( !$.cssHooks ) {
  // If not, output an error message
  throw( new Error( "jQuery 1.4.3 or above is required for this plugin to work" ) );
}
 
// Wrap in a document ready call, because jQuery writes
// cssHooks at this time and will blow away your functions
// if they exist.
$(function () {
  $.cssHooks[ "someCSSProp" ] = {
    get: function( elem, computed, extra ) {
      // Handle getting the CSS property
    },
    set: function( elem, value ) {
      // Handle setting the CSS value
    }
  };
});
 
})( jQuery );

Тестирование возможностей

Прежде чем нормализовать свойство CSS, зависящее от поставщика, сначала определите, поддерживает ли браузер стандартное свойство или вариацию с префиксом поставщика. Например, чтобы проверить поддержку свойства border-radius, проверьте, является ли какая-либо из вариаций членом объекта style временного элемента.

(function( $ ) {
 
function styleSupport( prop ) {
  var vendorProp, supportedProp,
 
    // Capitalize first character of the prop to test vendor prefix
    capProp = prop.charAt( 0 ).toUpperCase() + prop.slice( 1 ),
    prefixes = [ "Moz", "Webkit", "ms" ],
    div = document.createElement( "div" );
 
  if ( prop in div.style ) {
 
    // Browser supports standard CSS property name
    supportedProp = prop;
  } else {
 
    // Otherwise test support for vendor-prefixed property names
    for ( var i = 0; i < prefixes.length; i++ ) {
      vendorProp = prefixes[ i ] + capProp;
      if ( vendorProp in div.style ) {
        supportedProp = vendorProp;
        break;
      }
    }
  }
 
  // Avoid memory leak in IE
  div = null;
 
  // Add property to $.support so it can be accessed elsewhere
  $.support[ prop ] = supportedProp;
  return supportedProp;
}
 
// Call the function, e.g. testing for "border-radius" support:
styleSupport( "borderRadius" );
 
})( jQuery );

Определение полного css-хука

Чтобы определить полный css-хук, объедините тест поддержки с заполненной версией шаблонного скелета, представленного в первом примере:

(function( $ ) {
 
if ( !$.cssHooks ) {
  throw( new Error( "jQuery 1.4.3+ is needed for this plugin to work" ) );
}
 
function styleSupport( prop ) {
  var vendorProp, supportedProp,
    capProp = prop.charAt( 0 ).toUpperCase() + prop.slice( 1 ),
    prefixes = [ "Moz", "Webkit", "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;
}
 
var borderRadius = styleSupport( "borderRadius" );
 
// Set cssHooks only for browsers that support a vendor-prefixed border radius
if ( borderRadius && borderRadius !== "borderRadius" ) {
  $.cssHooks.borderRadius = {
    get: function( elem, computed, extra ) {
      return $.css( elem, borderRadius );
    },
    set: function( elem, value) {
      elem.style[ borderRadius ] = value;
    }
  };
}
 
})( jQuery );

Затем вы можете установить радиус границы в поддерживаемом браузере, используя либо стиль DOM (camelCased), либо стиль CSS (с дефисами):

$( "#element" ).css( "borderRadius", "10px" );
$( "#another" ).css( "border-radius", "20px" );

Если браузер не поддерживает ни одну форму свойства CSS, с префиксом поставщика или без, стиль не применяется к элементу. Однако, если браузер поддерживает собственную альтернативу, её можно применить к cssHooks вместо этого.

(function( $ ) {
 
// Feature test for support of a CSS property
// and a proprietary alternative
// ...
if ( $.support.someCSSProp && $.support.someCSSProp !== "someCSSProp" ) {
 
  // Set cssHooks for browsers that
  // support only a vendor-prefixed someCSSProp
  $.cssHooks.someCSSProp = {
    get: function( elem, computed, extra ) {
      return $.css( elem, $.support.someCSSProp );
    },
    set: function( elem, value) {
      elem.style[ $.support.someCSSProp ] = value;
    }
  };
} else if ( supportsProprietaryAlternative ) {
  $.cssHooks.someCSSProp = {
    get: function( elem, computed, extra ) {
      // Handle crazy conversion from the proprietary alternative
    },
    set: function( elem, value ) {
      // Handle crazy conversion to the proprietary alternative
    }
  }
}
 
})( jQuery );

Специальные единицы

По умолчанию jQuery добавляет единицу "px" к значениям, переданным методу .css(). Это поведение можно предотвратить, добавив свойство в объект jQuery.cssNumber.

$.cssNumber.someCSSProp = true;

Анимация с помощью cssHooks

Css-хук также может подключиться к механизму анимации jQuery, добавив свойство к объекту jQuery.fx.step:

$.fx.step.someCSSProp = function( fx ) {
  $.cssHooks.someCSSProp.set( fx.elem, fx.now + fx.unit );
};

Обратите внимание, что это лучше всего работает для простых анимированных значений чисел. В зависимости от свойства CSS, типа возвращаемого значения и сложности анимации может потребоваться больше пользовательского кода.