jQuery.cssHooks Returns: Object
Description: Hook directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.
-
version added: 1.4.3jQuery.cssHooks
The $.cssHooks
object provides a way to define functions for getting and setting particular CSS values. It can also be used to create new cssHooks for normalizing CSS3 features such as box shadows and gradients.
For example, some versions of Webkit-based browsers require -webkit-border-radius
to set the border-radius
on an element, while earlier Firefox versions require -moz-border-radius
. A css hook can normalize these vendor-prefixed properties to let .css()
accept a single, standard property name (border-radius
, or with DOM property syntax, borderRadius
).
In addition to providing fine-grained control over how specific style properties are handled, $.cssHooks
also extends the set of properties available to the .animate()
method.
Defining a new css hook is straight-forward. The skeleton template below can serve as a guide to creating your own.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
|
Feature Testing
Before normalizing a vendor-specific CSS property, first determine whether the browser supports the standard property or a vendor-prefixed variation. For example, to check for support of the border-radius
property, see if any variation is a member of a temporary element's style
object.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
|
Defining a complete css hook
To define a complete css hook, combine the support test with a filled-out version of the skeleton template provided in the first example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
|
You can then set the border radius in a supported browser using either the DOM (camelCased) style or the CSS (hyphenated) style:
1
2
|
|
If the browser lacks support for any form of the CSS property, vendor-prefixed or not, the style is not applied to the element. However, if the browser supports a proprietary alternative, it can be applied to the cssHooks instead.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
|
Special units
By default, jQuery adds a "px" unit to the values passed to the .css()
method. This behavior can be prevented by adding the property to the jQuery.cssNumber
object
1
|
|
Animating with cssHooks
A css hook can also hook into jQuery's animation mechanism by adding a property to the jQuery.fx.step
object:
1
2
3
|
|
Note that this works best for simple numeric-value animations. More custom code may be required depending on the CSS property, the type of value it returns, and the animation's complexity.