jQuery 3.7.0 Released: Staying in Order
jQuery 3.7.0 is now available! This release has it all: bug fixes, a new method, and a performance improvement! We even dropped our longtime selector engine: Sizzle. Or, I should say, we moved it into jQuery. jQuery no longer depends on Sizzle as a separate project, but has instead dropped its code directly into jQuery core. This helps us prepare for the major changes coming to selection in future jQuery versions. That doesn’t mean much right now, but jQuery did drop a few bytes because Sizzle supports even older browsers than jQuery. As an aside, we do plan on archiving Sizzle, but we’ll have more details on that in a future blog post.
As usual, the release is available on our cdn and the npm package manager. Other third party CDNs will probably have it soon as well, but remember that we don’t control their release schedules and they will need some time. Here are the highlights for jQuery 3.7.0.
New method: .uniqueSort()
Some APIs, like .prevAll(), return elements in reverse order, which can result in some confusing behavior when used with wrapping methods. For example,
$elem.prevAll().wrapAll("<p/>")
The above would wrap all of the elements as expected, but it would write those elements to the DOM in reverse order. To solve this in a way that prevented breaking existing code, we’ve documented that .prevAll() and similar methods return reverse-order collections, which is still desirable in many cases. But we’ve also added a new method to make things easier: a chainable .uniqueSort(), which does the equivalent of the existing but static jQuery.uniqueSort().
So, our previous example would become:
$elem.prevAll().uniqueSort().wrapAll("<p/>")
and the element order in the DOM would remain the same.
Added some unitless CSS properties
jQuery 3.7.0 adds support for more CSS properties that should not automatically have “px” added to them when they are set without units. For instance, .css('aspect-ratio', 5) would result in the CSS aspect-ratio: 5px;. All in all, we added seven more properties, and we got a little help with our list from React. Thanks, React!
It’s worth noting that jQuery 4.0 will change the way we handle unitless CSS properties. Rather than relying on a list of CSS properties to avoid adding "px", we’ll instead have an list of properties to which we definitely want to add "px" when there are no units passed. That should be more future-proof.
Performance improvement in manipulation
jQuery 3.7.0 comes with a measurable performance improvement for some use cases when using manipulation methods like .append(). When we removed a support test for a browser we no longer support, it meant that checks against document changes no longer needed to run at all. Essentially, that resulted in a speedup anywhere between 0% and 100%. The most significant speedup will be for some rare cases where users frequently switch contexts between different documents, perhaps by running manipulations across multiple iframes.
Negative margins in outerHeight(true)
Back in jQuery 3.3.0, we fixed an issue to include scroll gutters in the calculations for .innerWidth() and .innerHeight(). However, that fix didn’t take negative margins into account, which meant that .outerWidth(true) and .outerHeight(true) no longer respected negative margins. We’ve fixed that in 3.7.0 by separating the margin calculations from the scroll gutter adjustments.
Using different native focus events in IE
Focus and blur events are probably the most complicated events jQuery has to deal with across browsers. jQuery 3.4.0 introduced some minor regressions when it fixed an issue with the data passed through focus events. We were finally able to close all of those tickets in jQuery 3.7.0!
But, we need to point out a possible breaking change in IE. In all versions of IE, focus & blur events are fired asynchronously. In all other browsers, those events are fired synchronously. The asynchronous behavior in IE caused issues. The fix was to change which events we used natively. Fortunately, focusin & focusout are run synchronously in IE, and so we now simulate focus via focusin and blur via focusout in IE. That one change allowed us to rely on synchronous focus events in IE, which solved a lot of issues (see the changelog for the full list).
If you’re curious, support for IE will be dropped in jQuery 5.0 and many of those changes are already in a PR.
Upgrading
We do not expect compatibility issues when upgrading from a jQuery 3.0+ version. To upgrade, have a look at the new 3.5 Upgrade Guide. If you haven’t yet upgraded to jQuery 3+, first have a look at the 3.0 Upgrade Guide.
The jQuery Migrate plugin will help you to identify compatibility issues in your code. Please try out this new release and let us know about any issues you experienced.
If you can’t yet upgrade to 3.5+, Daniel Ruf has kindly provided patches for previous jQuery versions.
Download
You can get the files from the jQuery CDN, or link to them directly:
https://code.jquery.com/jquery-3.7.0.js
https://code.jquery.com/jquery-3.7.0.min.js
You can also get this release from npm:
npm install jquery@3.7.0
Slim build
Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’ve released a “slim” version that excludes these modules. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 6k gzipped bytes smaller than the regular version. These files are also available in the npm package and on the CDN:
https://code.jquery.com/jquery-3.7.0.slim.js
https://code.jquery.com/jquery-3.7.0.slim.min.js
These updates are already available as the current versions on npm and Bower. Information on all the ways to get jQuery is available at https://jquery.com/download/. Public CDNs receive their copies today, please give them a few days to post the files. If you’re anxious to get a quick start, use the files on our CDN until they have a chance to update.
Thanks
Thank you to all of you who participated in this release by submitting patches, reporting bugs, or testing, including fecore1, Michal Golebiowski-Owczarek and the whole jQuery team.
We’re on Mastodon!
jQuery now has its very own Mastodon account. We will be cross posting to both Twitter and Mastodon from now on. Also, you may be interested in following some of our team members that have Mastodon accounts.
jQuery: https://social.lfx.dev/@jquery
mgol: https://hachyderm.io/@mgol
timmywil: https://hachyderm.io/@timmywil
Changelog
Full changelog: 3.7.0
Build
- Only install Playwright dependencies when needed (212b6a4f)
- Bump actions/setup-node from 3.5.1 to 3.6.0 (582785e0)
- Run GitHub Action browser tests on Playwright WebKit (da7057e9)
- Migrate middleware-mockserver to modern JS (6b2abbdc)
- remove stale Insight package from custom builds (37b04d5a)
CSS
- Make `offsetHeight( true )`, etc. include negative margins (#3982, 7bb48a02)
- Add missing jQuery.cssNumber entries (#5179, 3eed2820)
Deferred
Docs
Event
- Simplify the check for saved data in leverageNative (9ab26aa5)
- Make trigger(focus/blur/click) work with native handlers (#5015, 754108fb)
- Simulate focus/blur in IE via focusin/focusout (3.x version) (#4856, #4859, #4950, 59f7b55b)
Release
- add support for md5 sums in windows (3b7bf199)
Selector
- Remove an obsolete comment (14685b31)
- Wrap activeElement access in try-catch (3936cf3e)
- Stop relying on CSS.supports( “selector(…)” ) (#5194, 63c3af48)
- Rename rcombinators to rleadingCombinator (ac1c59a3)
- Make selector lists work with `qSA` again (#5177, 848de625)
- Implement the `uniqueSort` chainable method (#5166, 0acbe643)
- Inline Sizzle into the selector module: 3.x version (#5113) (6306ca49)
Tests
- Indicate Chrome 112 & Safari 16.4 pass the cssHas support test (3.x version) (1a4d87af)
- Fix tests added in gh-5233 (759232e5)
- Add tests for arary data in ajax (4837a95b)
- Skip jQuery.Deferred.exceptionHook tests in IE 9 (98dd622a)
- Test AJAX deprecated event aliases properly (18139213)
- Fix selector tests in Chrome (732592c2)
- Skip the native :valid tests in IE 9 (6b2094da)