Bug Tracker

Ticket #10679 (closed feature: fixed)

Opened 3 years ago

Last modified 3 years ago

CSS3 vendor prefix support

Reported by: mikesherov Owned by: mikesherov
Priority: low Milestone: 1.8
Component: css Version: 1.7
Keywords: 1.8-discuss Cc:
Blocking: Blocked by:

Description (last modified by rwaldron) (diff)

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

Change History

comment:1 Changed 3 years ago by mikesherov

comment:2 Changed 3 years ago by timmywil

  • Keywords 1.8-discuss added
  • Priority changed from undecided to low
  • Status changed from new to open
  • Component changed from unfiled to core
  • Version changed from git to 1.7

comment:3 Changed 3 years ago by rwaldron

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

comment:4 Changed 3 years ago by mikesherov

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

comment:5 Changed 3 years ago by rwaldron

This is the prefix detector I wrote for Abacus:

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

comment:6 Changed 3 years ago by mikesherov

  • Owner set to mikesherov
  • Status changed from open to assigned

comment:7 Changed 3 years ago by mikesherov

  • Component changed from core to css

comment:8 Changed 3 years ago by mikesherov

  • Description modified (diff)

+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.

comment:9 Changed 3 years ago by jaubourg

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

comment:10 Changed 3 years ago by dmethvin

  • Description modified (diff)

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

comment:11 Changed 3 years ago by timmywil

  • Description modified (diff)

+1

comment:12 Changed 3 years ago by rwaldron

  • Description modified (diff)

+1

comment:13 Changed 3 years ago by mikesherov

  • Milestone changed from None to 1.8

comment:14 Changed 3 years ago by mikesherov

#11565 is a duplicate of this ticket.

comment:15 Changed 3 years ago by 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; }
	};
}

comment:16 Changed 3 years ago by 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!

comment:17 Changed 3 years ago by SineSwiper

Thanks.

Last edited 3 years ago by SineSwiper (previous) (diff)

comment:18 Changed 3 years ago by dmethvin

  • Status changed from assigned to closed
  • Resolution set to fixed

comment:19 Changed 3 years ago by Mike Sherov

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

Changeset: 5376a809c0d2bee4b7872847c2821e458dfdcc3b

Note: See TracTickets for help on using tickets.