The hook mechanism of CSS

Do you know that some core jQuery functions have their own "plug-in API" called "hooks"?

JQuery provides an API to invoke user-defined functions to extend to get and set specific property values. Hooks are introduced in the operations of. Attr,.prop (),. Val () and. CSS (), and hooks have similar structures.

var Somehook = {
get:function (elem) {
//obtain and return a value return
"something"; 
  },
set:function (Elem, value) {
//do something with value
}
}

What's the hook for?

When you do CSS3 property browser compatibility, you need a specific prefix.

Webkit Kernel Browser:-webkit-border-radius
Firefox Kernel browser:-moz-border-radius

At this point, I think you can use a CSS hook to standardize the attributes of these vendor prefixes, so that the CSS accepts a single standard attribute name (Border-radius or the syntax of the DOM attribute Borderradius) to judge the code omitted, directly looking at the implementation, Sets an element to a borderradius of 10px.

$ ("#element"). CSS ("Borderradius", "10px");

To make browser-compatible, we have to:

if (WebKit) {......
........ ...
} else if (Firefox) {................. ...
} else if (...) More

This is one of the least technical formulations, if we change to a hook:

$.csshooks.borderradius = {
      get:function (elem, computed, extra) {return
        $.css (Elem, Borderradius);
      },
  set:function (Elem, value) {
        elem.style[Borderradius] = value;
      }
;

The $.csshooks object provides a way to get and set a specific CSS value by defining a function, or it can be used to create a new csshooks to standardize CSS3 features such as box shadows and gradients.

For example, the Border-radius property, in the early morning has not formed a standardized browser has its own implementation, such as WebKit based on Google's browser needs to write Webkit-border-radius,firefox need to write- Moz-border-radius, so we need a hook to both determine this standard to implement the prefix additions to this header.

In addition to providing more granular control over the processing of a particular style, $.csshooks also expands the properties available on the. Animate () method. Here may not be intuitive embodiment, we need to go deep into the CSS in the following chapters in the source code to see the specific usage. If the browser does not support any form of CSS attribute writing and does not support any prefix notation, the style is not applied to the element. However, if the browser supports a particular type of writing, you can add support for that particular usage in csshooks.