Selector: Use Sizzle `:has` if `CSS.supports(selector(...))` non-compliant #486

mgol · 2022-09-11T22:20:18Z

Sizzle has followed the following logic for selector handling for ages:

Modify the selector to adhere to scoping rules jQuery mandates.
Try qSA on the modified selector. If it succeeds, use the results.
If qSA threw an error, run the Sizzle custom traversal instead.

It worked fine so far but now CSS has a concept of forgiving selector lists that some selectors like :is() & :has() use. That means providing unrecognized selectors as parameters to :is() & :has() no longer throws an error, it will just return no results. That made browsers with native :has() support break selectors using jQuery extensions inside, e.g. :has(:contains("Item")).

Detecting support for selectors can also be done via:

CSS.supports( "selector(SELECTOR_TO_BE_TESTED)" )

which returns a boolean. There was a recent spec change requiring this API to always use non-forgiving parsing:
w3c/csswg-drafts#7280 (comment) However, no browsers have implemented this change so far.

To solve this, two changes are being made:

In browsers supports the new spec change to CSS.supports( "selector()" ), use it before trying qSA.
Otherwise, add :has to the buggy selectors list.

Fixes jquery/jquery#5098
Ref jquery/jquery#5107

+78 bytes

mgol · 2022-09-11T22:20:52Z

jQuery version of this PR for jQuery 4.0.0: jquery/jquery#5107

mgol · 2022-09-12T13:19:39Z

I run tests on this PR with a CP from #485 locally on the same browsers on which they're run on CI and all passed.

mgol · 2022-09-12T13:52:28Z

src/sizzle.js

@@ -1719,7 +1776,7 @@ Expr = Sizzle.selectors = {
 			return elem.nodeName.toLowerCase() === "input" &&
 				elem.type === "text" &&

-				// Support: IE<8
+				// Support: IE <10 only


This change is not related but I found it while working on jquery/jquery#5113 and discovering removal of this workaround breaks the relevant test in IE 9.

mgol · 2022-09-15T10:51:19Z

src/sizzle.js

@@ -651,6 +672,30 @@ setDocument = Sizzle.setDocument = function( node ) {
 			!el.querySelectorAll( ":scope fieldset div" ).length;
 	} );

+	// Support: Chrome 105+, Firefox 104+, Safari 15.4+


Suggested change

// Support: Chrome 105+, Firefox 104+, Safari 15.4+

// Support: Chrome 105+, Firefox 104+, Safari 15.4+, IE 6 - 11+, Edge 12 - 18+

Plus, I should mention IE & Edge as ones not supporting the API at all.

timmywil

Good use of CSS.supports with :is!

Sizzle has followed the following logic for selector handling for ages: 1. Modify the selector to adhere to scoping rules jQuery mandates. 2. Try `qSA` on the modified selector. If it succeeds, use the results. 3. If `qSA` threw an error, run the Sizzle custom traversal instead. It worked fine so far but now CSS has a concept of forgiving selector lists that some selectors like `:is()` & `:has()` use. That means providing unrecognized selectors as parameters to `:is()` & `:has()` no longer throws an error, it will just return no results. That made browsers with native `:has()` support break selectors using jQuery extensions inside, e.g. `:has(:contains("Item"))`. Detecting support for selectors can also be done via: ```js CSS.supports( "selector(SELECTOR_TO_BE_TESTED)" ) ``` which returns a boolean. There was a recent spec change requiring this API to always use non-forgiving parsing: w3c/csswg-drafts#7280 (comment) However, no browsers have implemented this change so far. To solve this, two changes are being made: 1. In browsers supports the new spec change to `CSS.supports( "selector()" )`, use it before trying `qSA`. 2. Otherwise, add `:has` to the buggy selectors list. Fixes jquery/jquery#5098 Ref jquery/jquery#5107 Ref w3c/csswg-drafts#7676

jQuery has followed the following logic for selector handling for ages: 1. Modify the selector to adhere to scoping rules jQuery mandates. 2. Try `qSA` on the modified selector. If it succeeds, use the results. 3. If `qSA` threw an error, run the jQuery custom traversal instead. It worked fine so far but now CSS has a concept of forgiving selector lists that some selectors like `:is()` & `:has()` use. That means providing unrecognized selectors as parameters to `:is()` & `:has()` no longer throws an error, it will just return no results. That made browsers with native `:has()` support break selectors using jQuery extensions inside, e.g. `:has(:contains("Item"))`. Detecting support for selectors can also be done via: ```js CSS.supports( "selector(SELECTOR_TO_BE_TESTED)" ) ``` which returns a boolean. There was a recent spec change requiring this API to always use non-forgiving parsing: w3c/csswg-drafts#7280 (comment) However, no browsers have implemented this change so far. To solve this, two changes are being made: 1. In browsers supports the new spec change to `CSS.supports( "selector()" )`, use it before trying `qSA`. 2. Otherwise, add `:has` to the buggy selectors list. Ref jquerygh-5098 Ref jquerygh-5107 Ref jquery/sizzle#486 Ref w3c/csswg-drafts#7676

Fixes jquerygh-5098 Ref jquery/sizzle#486 Ref jquerygh-5107

Fixes gh-5098 Closes gh-5135 Ref jquery/sizzle#486 Ref gh-5107

jQuery has followed the following logic for selector handling for ages: 1. Modify the selector to adhere to scoping rules jQuery mandates. 2. Try `qSA` on the modified selector. If it succeeds, use the results. 3. If `qSA` threw an error, run the jQuery custom traversal instead. It worked fine so far but now CSS has a concept of forgiving selector lists that some selectors like `:is()` & `:has()` use. That means providing unrecognized selectors as parameters to `:is()` & `:has()` no longer throws an error, it will just return no results. That made browsers with native `:has()` support break selectors using jQuery extensions inside, e.g. `:has(:contains("Item"))`. Detecting support for selectors can also be done via: ```js CSS.supports( "selector(SELECTOR_TO_BE_TESTED)" ) ``` which returns a boolean. There was a recent spec change requiring this API to always use non-forgiving parsing: w3c/csswg-drafts#7280 (comment) However, no browsers have implemented this change so far. To solve this, two changes are being made: 1. In browsers supports the new spec change to `CSS.supports( "selector()" )`, use it before trying `qSA`. 2. Otherwise, add `:has` to the buggy selectors list. Ref jquerygh-5098 Ref jquerygh-5107 Ref jquery/sizzle#486 Ref w3c/csswg-drafts#7676

`CSS.supports( "selector(...)" )` has different semantics than selectors passed to `querySelectorAll`. Apart from the fact that the former returns `false` for unrecognized selectors and the latter throws, `qSA` is more forgiving and accepts some invalid selectors, auto-correcting them where needed - for example, mismatched brackers are auto-closed. This behavior difference is breaking for many users. To add to that, a recent CSSWG resolution made `:is()` & `:where()` the only pseudos with forgiving parsing; browsers are in the process of making `:has()` parsing unforgiving. Taking all that into account, we go back to our previous try-catch approach without relying on `CSS.supports( "selector(...)" )`. The only difference is we detect forgiving parsing in `:has()` and mark the selector as buggy. Fixes jquery/jquery#5194 Ref jquery/jquery#5098 Ref jquerygh-486 Ref w3c/csswg-drafts#7676

`CSS.supports( "selector(...)" )` has different semantics than selectors passed to `querySelectorAll`. Apart from the fact that the former returns `false` for unrecognized selectors and the latter throws, `qSA` is more forgiving and accepts some invalid selectors, auto-correcting them where needed - for example, mismatched brackers are auto-closed. This behavior difference is breaking for many users. To add to that, a recent CSSWG resolution made `:is()` & `:where()` the only pseudos with forgiving parsing; browsers are in the process of making `:has()` parsing unforgiving. Taking all that into account, we go back to our previous try-catch approach without relying on `CSS.supports( "selector(...)" )`. The only difference is we detect forgiving parsing in `:has()` and mark the selector as buggy. Fixes jquery/jquery#5194 Closes gh-493 Ref jquery/jquery#5098 Ref jquery/jquery#5206 Ref jquery/jquery#5207 Ref gh-486 Ref w3c/csswg-drafts#7676

mgol added this to the 2.3.7 milestone Sep 11, 2022

mgol requested review from timmywil and gibson042 September 11, 2022 22:20

mgol mentioned this pull request Sep 11, 2022

Selector: Use jQuery :has if CSS.supports(selector(...)) non-compliant jquery/jquery#5107

Merged

2 tasks

mgol mentioned this pull request Sep 11, 2022

Build: Update tested browsers #485

Merged

mgol commented Sep 12, 2022

View reviewed changes

mgol mentioned this pull request Sep 13, 2022

Selector: Inline Sizzle into the selector module: 3.x version jquery/jquery#5113

Merged

7 tasks

mgol commented Sep 15, 2022

View reviewed changes

mgol changed the title ~~Selector: Use Sizzle :has if CSS.supports(selector(...)) non-compliant~~ Selector: Use Sizzle :has if CSS.supports(selector(...)) non-compliant Sep 15, 2022

timmywil approved these changes Sep 19, 2022

View reviewed changes

mgol force-pushed the css-supports-has branch from 90ae0cd to 50a1a1b Compare September 19, 2022 17:38

mgol force-pushed the css-supports-has branch from 50a1a1b to 2e276d4 Compare September 19, 2022 17:43

mgol mentioned this pull request Sep 19, 2022

Selector :contains within :has seems broken on Chrome jquery/jquery#5098

Closed

mgol merged commit 3798e3d into jquery:main Sep 19, 2022

mgol deleted the css-supports-has branch September 19, 2022 19:21

mgol added a commit to mgol/jquery that referenced this pull request Oct 3, 2022

Build: Update Sizzle from 2.3.6 to 2.3.7

cde756c

Fixes jquerygh-5098 Ref jquery/sizzle#486 Ref jquerygh-5107

mgol added a commit to mgol/jquery that referenced this pull request Oct 3, 2022

Selector: Update Sizzle from 2.3.6 to 2.3.7

70919a5

Fixes jquerygh-5098 Ref jquery/sizzle#486 Ref jquerygh-5107

mgol mentioned this pull request Oct 3, 2022

Selector: Update Sizzle from 2.3.6 to 2.3.7 jquery/jquery#5135

Merged

1 task

mgol added a commit to jquery/jquery that referenced this pull request Oct 4, 2022

Selector: Update Sizzle from 2.3.6 to 2.3.7

ee0fec0

Fixes gh-5098 Closes gh-5135 Ref jquery/sizzle#486 Ref gh-5107

mgol mentioned this pull request Feb 10, 2023

Selector: Stop relying on CSS.supports( "selector(...)" ) #493

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Selector: Use Sizzle `:has` if `CSS.supports(selector(...))` non-compliant #486

Selector: Use Sizzle `:has` if `CSS.supports(selector(...))` non-compliant #486

mgol commented Sep 11, 2022 •

edited

Loading

mgol commented Sep 11, 2022

mgol commented Sep 12, 2022

mgol Sep 12, 2022

mgol Sep 15, 2022

timmywil left a comment

	// Support: Chrome 105+, Firefox 104+, Safari 15.4+
	// Support: Chrome 105+, Firefox 104+, Safari 15.4+, IE 6 - 11+, Edge 12 - 18+

Selector: Use Sizzle :has if CSS.supports(selector(...)) non-compliant #486

Selector: Use Sizzle :has if CSS.supports(selector(...)) non-compliant #486

Conversation

mgol commented Sep 11, 2022 • edited Loading

mgol commented Sep 11, 2022

mgol commented Sep 12, 2022

mgol Sep 12, 2022

Choose a reason for hiding this comment

mgol Sep 15, 2022

Choose a reason for hiding this comment

timmywil left a comment

Choose a reason for hiding this comment

Selector: Use Sizzle `:has` if `CSS.supports(selector(...))` non-compliant #486

Selector: Use Sizzle `:has` if `CSS.supports(selector(...))` non-compliant #486

mgol commented Sep 11, 2022 •

edited

Loading