CSS3 vendor prefix support

[mikesherov]

There are a few bugs, although admittedly edge cases, that effect the css and effects modules due to jQuery not taking into account CSS3: ​http://bugs.jquery.com/ticket/10413

I'd like to bring CSS3 vendor prefix detection to jQuery as both an exposed and documented feature, but also to address the bugs.

I've already submitted a pull request containing the code: ​https://github.com/jquery/jquery/pull/528

Please consider this for 1.8

[mikesherov]

This bug too: ​http://bugs.jquery.com/ticket/5520

[Rick Waldron]

I have a pretty solid prefix detector in Abacus... I'll ping you later with code

[mikesherov]

Yeah, please do. Also, check out the prefix code from what I wrote in the pull request I listed. Hopefully, they're similar.

[Rick Waldron]

This is the prefix detector I wrote for Abacus:

​https://github.com/Abacus/Abacus/blob/master/src/abacus.js#L109-115

[mikesherov]

+1, I'd argue that this is the type of thing people'd want in core jQuery. The homepage of jquery.com touts CSS1-3 support in jQuery (although the "and more" is ambiguous). Vendor prefixed attributes are a part of that, unfortunately, and this can help users of jQuery write a lot less code.

[jaubourg]

+1, Vendor prefixes are hell but the kind of hell jQuery needs to tackle.

[dmethvin]

+1, Since it's pretty common, this does seem like a place where adding bytes is worth it.

[timmywil]

+1

[Rick Waldron]

+1

[mikesherov]

#11565 is a duplicate of this ticket.

[SineSwiper]

Working code from dupe ticket. This can be plopped into jQuery's root routines easily. Instead of taking a piecemeal approach of adding workarounds manually, this skips all of that BS and just scans through div.style. If it's a vendor-specific property, then the name is normalized, and a cssHook is added. Done. Fin. Put it in!

var div = document.createElement('div');
for (var prop in div.style) {
	// Sanity checks
	if (! /^(Moz|Webkit|O|ms)[A-Z]/.test(prop)) continue;
	if (typeof prop !== 'string')               continue;
	
	var cssProp = prop.replace(/^(Moz|Webkit|O|ms)/, '');
	cssProp = cssProp.charAt(0).toLowerCase() + cssProp.slice(1);
	
	if (!$.cssHooks[cssProp]) $.cssHooks[cssProp] = {
		get: function (elem, computed, extra) { return $.css(elem, prop); },
		set: function (elem, value)           { elem.style[prop] = value; }
	};
}

[mikesherov]

Thanks for the code snippet! We've already landed a patch in the 1.8pre branch that does almost exactly this. Feel free to comment there too!

[SineSwiper]

Thanks.

[dmethvin]

Landed in 1.8pre: ​https://github.com/jquery/jquery/commit/5376a809c0d2bee4b7872847c2821e458dfdcc3b

[Mike Sherov]

Fix #10413, #10679. Fix box-sizing:border-box and add css vendor prefix support.

Changeset: 5376a809c0d2bee4b7872847c2821e458dfdcc3b