Skip to content

Instantly share code, notes, and snippets.

@cballou
Created November 3, 2012 11:19
Show Gist options
  • Save cballou/4007063 to your computer and use it in GitHub Desktop.
Save cballou/4007063 to your computer and use it in GitHub Desktop.
Creating jQuery CSS3 Vendor Prefix Mixins with $.cssHooks
(function($) {
if ( !$.cssHooks ) {
throw("jQuery 1.4.3+ is needed for this plugin to work");
return;
}
function styleSupport( prop ) {
var vendorProp, supportedProp,
capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
prefixes = [ "Moz", "Webkit", "O", "ms" ],
div = document.createElement( "div" );
if ( prop in div.style ) {
supportedProp = prop;
} else {
for ( var i = 0; i < prefixes.length; i++ ) {
vendorProp = prefixes[i] + capProp;
if ( vendorProp in div.style ) {
supportedProp = vendorProp;
break;
}
}
}
div = null;
$.support[ prop ] = supportedProp
return supportedProp;
}
// check for style support of your property
// TODO by user: swap out myCssPropName for css property
var myCssPropName = styleSupport("myCssPropName");
// set cssHooks only for browsers that
// support a vendor-prefixed border radius
if (myCssPropName && myCssPropName !== 'myCssPropName') {
$.cssHooks["myCssPropName"] = {
get: function(elem, computed, extra) {
// handle getting the CSS property
return $.css(elem, myCssPropName);
},
set: function(elem, value) {
// handle setting the CSS value
elem.style[myCssPropName] = value;
}
};
}
})(jQuery);
@cballou
Copy link
Author

cballou commented Nov 3, 2012

The above code is a sample template for using jQuery's $.cssHooks to add CSS3 vendor prefix mixin support to jQuery. Simply modify lines 32 through 47 with your own tag. Duplicate as needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment