jQuery.cssHooks JQ Home  <<  A & P  <<  jQuery.cssHooks

• <<    .css()
• jQuery.escapeSelector     >>

The jQuery.cssHooks object.

Description

The jQuery.cssHooks object is used to override CSS property retrieval and setting, normalize CSS property naming and create custom properties by hooking directly into jQuery.

The jQuery.cssHooks object allows us to do the following:

1. Define functions for getting and setting particular CSS values.
2. Create new cssHooks for normalizing CSS3 features.
3. Extend the set of properties available to the .animate() method.

Defining a New CSS Hook

The skeleton template below can used as a template for creating your own css hooks.

(function($) {
  // Check to see if cssHooks are supported
  if ( !$.cssHooks ) {
    // Not supported so output an error message
    throw("You need jQuery 1.4.3 or above for cssHooks to work");
    return;
  }

  $.cssHooks["aProp"] = {
    // handle getting the CSS property
    get: function( elem, computed, extra ) {
    },
    // handle setting the CSS value
    set: function( elem, value ) {
    }
  };
})(jQuery);

Defining a Test Harness

The test harness below can used to determine whether the browser supports the standard property or a vendor-prefixed variation.

(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 ) {

      // This browser supports standard CSS property name
      supportedProp = prop;
    } else {

      // Not supported so 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 "prop" support:
  styleSupport( "prop" );
})(jQuery);

A Working Example

We can define a complete css hook by combining the test harness with a beefed-out version of the skeleton template provided above.

(function($) {
  $('#btn33').on('click', function() {
    // Check to see if cssHooks are supported
    if ( !$.cssHooks ) {
      // Not supported so output an error message
      alert("You need jQuery 1.4.3 or above for cssHooks to work");
      return;
    }
    var checkProp = $('input:radio[name=property]:checked').val();
    // Call the function, e.g. testing for "prop" support:
    var styleProp = styleSupport(checkProp);

    // Alert properties we cannot use 
    if ( !styleProp ) {
      alert('The property name: ' + checkProp + ' is not supported in this browser');
    }

    // Set cssHooks only for browsers that support a vendor-prefixed property
    if ( styleProp && styleProp !== checkProp ) {
      $.cssHooks.styleProp = {
        get: function( elem, computed, extra ) {
          return $.css( elem, styleProp );
        },
        set: function( elem, value) {
          elem.style[ styleProp ] = value;
        }
      };
    }
    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 ) {

        // This browser supports standard CSS property name
        alert('The property name: ' + prop + ' is supported in this browser');
        supportedProp = prop;
      } else {

        // Not supported so 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;
            alert('The property name: ' + prop + ' has a vendor specific name of: ' 
                                        + vendorProp + ' - CSS hook will be applied');
            break;
          }
        }
      }

      // Avoid memory leak in IE
      div = null;
    
      // Add property to $.support so it can be accessed elsewhere
      $.support[ prop ] = supportedProp;
    
      return supportedProp;
    }
  });
});

Lets see this in action, check a property and press the button to test our function.

Select different radio buttons and try in different browsers to see the results.

Related Tutorials

jQuery Basic Tutorials - Lesson 10 - Working With General CSS Properties

• <<    .css()
• jQuery.escapeSelector     >>