cssHooks in jQuery 1.4.3

jQuery 1.4.3 brought us a complete rewrite of the CSS module. The main focus of this rewrite was to add extensibility. Along with some nice speed-ups in getting styles, the CSS module of jQuery now let you extend the functionality of .css() and .animate().  It allows this by adding cssHooks.

cssHooks allow you to “hook” in to how jQuery gets and sets css properties.  This means that you could create a cssHook to help normalize differences between browsers, or to add some missing functionality from the stock jQuery.fn.css().

Brandon Aaron has been doing some work, along with others, to create a collection of cssHooks.  They currently have:

  • margin and padding
  • backgroundPosition, backgroundPositionX, backgroundPositionY
  • boxShadow, boxShadowColor, boxShadowBlur, boxShadowX, boxShadowY

And I am sure there more to come.

Defining a new cssHook is very easy

$.cssHooks['cssproperty'] = {
	get: function( elem, computed, extra ) {
		// Handle getting the css property here
	set: function( elem, value ) {
		// Handle setting the css value here

Very simple and easy. To allow your new cssHook to be used with .animate() all it takes is (for simple number value animations):

$.fx.step[ 'cssproperty' ]  = function( fx ) {
	$.cssHooks['cssproperty'].set( fx.elem, fx.now + fx.unit);

Will be interesting to see what other cssHooks show up.

  • I just love this extensibility feature of the upcoming jQuery 1.4.3

  • Thanks for doing a write up on this! There really isn’t much documentation or coverage on this, but it really is pretty cool!

    Having the collection of cssHooks in one place is nice, but hopefully we’ll see more people using cssHooks in the wild 🙂

  • Will give it a try!

  • Jon

    Now here is some nice information! I was just thinking to myself “why didn’t they make the background positions separate attributes?” an lo and behold along comes this article!


  • Ok… maybe it’s only me… but using css(), height(), width() or similar function is hella slow in 1.4.3. I had to rewrite all of my code to native element.style, because I was having differences like 250-300ms or more (1.4.3) vs 5ms-10ms (native).
    Especially on the first calls. I didn’t believed it first.

  • this is simply great!

  • Pingback: jQuery: » jQuery Community Updates For November 24th 2010()

  • Pingback: jQuery Community Updates For November 24th 2010 - Free Web Design Phoenix()

  • …confused…

    ok… so this means that some css properties aren’t supported by jquery by default? how do i know which ones are supported and which ones need to have csshooks setup for them? …confused…

  • @confused Most of the hooks are for things that are CSS3 properties many which use the browser prefix, like border radius, border image, box shadow, etc. The core doesn’t have special case handling to add the browser prefix for these properties so you would have to do it yourself. What hooks allow is for a hook like the borderradius hook to be created and make easy to drop that file in to your page and now have easy border radius property support in all browsers.

  • Pingback: jQuery Community Updates For November 2010 | Web Resources Updates()

  • great stuf!

  • khien mera

    like it!!! =)

  • Chinabirdman

    hello, i am a green hand at css from China, also, i am not good at English. is there anyone tell how to download this source?

  • I have some problems with css and jquery , hope this will resolve the problem.

  • Pingback: jQuery Community Updates For November 2010 | FrontEndHub()

  • du hoc uc

    I thinks so like you,thanks very much. In the future,
    I hope to improve to quality of post and your web is more and more useful to every ones

  • Adamrose007

    i like jQuery.

  • What an amazing post!

  • Pingback: jQuery Community Updates For November 2010 | HTML5 CSS3 Tutorials()

  • Pingback: Can anyone explain how/why to use jQuery’s CSS hooks? | DEEP in PHP()

  • Cheers for that information, was very helpful! 

    Absolute eCommerce Web Design