The hook mechanism of CSS

Source: Internet
Author: User
Tags functions return
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.



Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.