$.cssHooks 對像提供了一種通過定義函式來獲取或設定特定 CSS 值的方法。可以用它來建立新的 cssHooks 用於標準化 CSS3 功能，例如，盒子陰影（box shadows）及漸變（gradients）。

例如，某些基於 Webkit 的瀏覽器會使用 -webkit-border-radius 來設定對象的 border-radius，然而,早先版本的 Firefox 則使用 -moz-border-radius。cssHook 就可以將這些不同的寫法進行標準化，從而讓 .css() 可以使用統一的標準化屬性名(border-radius 或對應的 DOM 屬性寫法 borderRadius)。

該方法除了提供了對特定樣式的處理可以採用更加細緻的控制外，$.cssHooks 同時還擴充套件了 .animate() 方法上的屬性集。

定義一個新的 cssHook 十分簡單。下面的模板可以方便您建立自己的 cssHook：

(function($) {
    // first, check to see if cssHooks are supported
    if ( !$.cssHooks ) {
      // if not, output an error message
      throw("jQuery 1.4.3 or above is required for this plugin to work");
      return;
    }
      $.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", "O", "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);  

定義一個完整的 cssHook

爲了定義一個完整的 cssHook，首先我們需要測試您目前使用的 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;
    }
      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 (camel 式) 樣式的寫法或使用 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);  

特殊單位

預設情況下，通過 .css() 方法設定的值，jQuery 會為其加上 "px" 單位。您可以通過向 jQuery.cssNumber 對像中新增屬性的方法來防止這種行為的發生。

$.cssNumber["someCSSProp"] = true;

動畫與 cssHooks

通過向 jQuery.fx.step 對像中新增屬性，cssHook 同樣可以向 jQuery 的動畫機制中新增鉤子：

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

注意，上述這種用法應用於簡單的數值屬性的動畫是最好的。根據不同的 CSS 屬性，返回值的型別以及動畫的複雜性，可能需要在 cssHooks 寫更多的程式碼。