-
|
I have some code that does A great thing is that jQuery automatically converts the property name to I had a look at jQuery source code, but did not figure out how jQuery manages to intelligently add vendor prefixes when needed. I'm pretty sure there is no hardcoded list of properties/browsers, so some detection should be made somewhere… Could anyone tell how the magic happens? (By the way, Safari is the only remaining major browser that doesn't support the unprefixed |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments
-
|
The logic is contained in https://github.com/jquery/jquery/blob/1fa8df5dbd5d84cf55882a38eb6e571abd0aa938/src/css/finalPropName.js, in the jquery/src/css/finalPropName.js Lines 24 to 28 in 1fa8df5 If the cache does not exist, it checks if the property itself is supported by checking if it's a key in an empty style object: jquery/src/css/finalPropName.js Lines 29 to 31 in 1fa8df5 If not, it tries to guess a vendor prefix by trying prefixed versions of the supplied property: jquery/src/css/finalPropName.js Lines 8 to 20 in 1fa8df5 The list of accepted vendor prefixes is hardcoded: jquery/src/css/finalPropName.js Line 3 in 1fa8df5 It's important that this logic is applied for every property in isolation as some browsers now support multiple vendor prefixes; if we cached the prefix globally, we could be checking a wrong one for a different property. |
Beta Was this translation helpful? Give feedback.
-
|
Coming back a bit late. Thank you for the detailed explanation. Now that the relevant file is found, things become much simpler to understand. Side note (no action needed): I noticed that, due to the But that's only a theoretical issue. JavaScript has historically been preventing collisions between HTML/CSS names and JavaScript object property names (the most notable example being |
Beta Was this translation helpful? Give feedback.
-
|
However, I noticed that when querying a CSS property name that exists unprefixed, it doesn't get cached into the Therefore, when querying unprefixed names, each time there is one lookup in the Namely, I'm suggesting this change: export function finalPropName( name ) {
var final = vendorProps[ name ];
if ( final ) {
return final;
}
if ( name in emptyStyle ) {
// replace:
//return name;
// with:
return vendorProps[ name ] = name;
}
return vendorProps[ name ] = vendorPropName( name ) || name;
}Then to avoid confusion, we should rename the (Just as a reminder: The user might also query already prefixed names. Such use case would, and should, work as well. Just something to keep in mind.) |
Beta Was this translation helpful? Give feedback.
-
|
I opened an issue about this: #5582. |
Beta Was this translation helpful? Give feedback.
The logic is contained in https://github.com/jquery/jquery/blob/1fa8df5dbd5d84cf55882a38eb6e571abd0aa938/src/css/finalPropName.js, in the
finalPropNamefunction. It keeps an object caching mapping from a property to its prefixed versions and consults it at the beginning:jquery/src/css/finalPropName.js
Lines 24 to 28 in 1fa8df5
If the cache does not exist, it checks if the property itself is supported by checking if it's a key in an empty style object:
jquery/src/css/finalPropName.js
Lines 29 to 31 in 1fa8df5
If not, i…