Intent to Ship: Selectors Level 4: :is() and :where()

[Anders Hartvoll Ruud]

Contact emails

and...@chromium.org

Specification

https://drafts.csswg.org/selectors-4/#matches

Summary

The :is() pseudo class matches an element that matches any of the selectors in its argument. This is powerful when used in conjunction with combinators. For example, you can select all <hN> elements that are subsequent siblings of other <hN> elements like this: :is(h1, h2, h3, h4, h5, h6) ~ :is(h1, h2, h3, h4, h5, h6). To achieve the same without :is(), you'd need a very long selector list h1 ~ h1, h1 ~ h2, h1 ~ h3, ... (etc) ... h6 ~ h6.

The :where() pseudo class behaves exactly like :is(), except that its specificity is always zero.

The :is() / :where() pseudo classes introduce the <forgiving-selector-list> concept, which means that invalid selector arguments to :is() / :where() are dropped individually, rather than invalidating the entire selector. For example, :is(div, :nonsense, span) effectively parses and behaves like a valid selector :is(div, span). This I2S includes support for the <forgiving-selector-list> behavior.

Blink component

Blink>CSS

TAG review

None

Risks

Interoperability and Compatibility

Gecko: Shipped

WebKit: Shipped (except <forgiving-selector-list> support)

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Should be decent:

wpt/css/selectors/is-nested.html - Behavior of nested :is()
wpt/css/selectors/is-specificity.html - Basic specificity behavior
wpt/css/selectors/is-where-error-recovery.tentative.html - <forgiving-selector-list>, will drop .tentative before shipping.
wpt/css/selectors/is-where-not.html - Interaction with the :not() pseudo class.
wpt/css/selectors/is-where-parsing.html - Parsing.
wpt/css/selectors/is-where-pseudo-classes.html - Interaction with other pseudo classes.
wpt/css/selectors/is-where-pseudo-elements.html - Interaction with pseudo elements.
wpt/css/selectors/is-where-shadow.html - Interaction with shadow dom concepts (:host, etc).
wpt/css/selectors/is-where-visited.html - Tests :visited/:link behavior (not landed yet, CL).
wpt/css/selectors/invalidation/is.html - Invalidation of :is().
wpt/css/selectors/invalidation/where.html - Invalidation of :where().
wpt/css/css-shadow-parts/interaction-with-nested-pseudo-class.html - Tests behavior of :is() following ::part().

We could actually have some more tests for basic behavior. Somehow we mostly have tests for advanced cases. I'll add this before shipping.

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=568705

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5445716612I will add some more basic tests before shipping.743168

This intent message was generated by Chrome Platform Status.

[Yoav Weiss]

LGTM1

On Fri, Oct 16, 2020 at 11:27 AM Anders Hartvoll Ruud <and...@chromium.org> wrote:

Contact emails

and...@chromium.org

Specification

https://drafts.csswg.org/selectors-4/#matches

Summary

The :is() pseudo class matches an element that matches any of the selectors in its argument. This is powerful when used in conjunction with combinators. For example, you can select all <hN> elements that are subsequent siblings of other <hN> elements like this: :is(h1, h2, h3, h4, h5, h6) ~ :is(h1, h2, h3, h4, h5, h6). To achieve the same without :is(), you'd need a very long selector list h1 ~ h1, h1 ~ h2, h1 ~ h3, ... (etc) ... h6 ~ h6.

The :where() pseudo class behaves exactly like :is(), except that its specificity is always zero.

The :is() / :where() pseudo classes introduce the <forgiving-selector-list> concept, which means that invalid selector arguments to :is() / :where() are dropped individually, rather than invalidating the entire selector. For example, :is(div, :nonsense, span) effectively parses and behaves like a valid selector :is(div, span). This I2S includes support for the <forgiving-selector-list> behavior.

Blink component

Blink>CSS

TAG review

None

I agree that a TAG review is not required as this is part of a WG spec and shipped by other vendors.

Risks

Interoperability and Compatibility

Gecko: Shipped

WebKit: Shipped (except <forgiving-selector-list> support)

Is there an open issue regarding the different behavior? This could result in compat issues, so it'd be good if we can get WebKit to align.

 

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Should be decent:

wpt/css/selectors/is-nested.html - Behavior of nested :is()
wpt/css/selectors/is-specificity.html - Basic specificity behavior
wpt/css/selectors/is-where-error-recovery.tentative.html - <forgiving-selector-list>, will drop .tentative before shipping.
wpt/css/selectors/is-where-not.html - Interaction with the :not() pseudo class.
wpt/css/selectors/is-where-parsing.html - Parsing.
wpt/css/selectors/is-where-pseudo-classes.html - Interaction with other pseudo classes.
wpt/css/selectors/is-where-pseudo-elements.html - Interaction with pseudo elements.
wpt/css/selectors/is-where-shadow.html - Interaction with shadow dom concepts (:host, etc).
wpt/css/selectors/is-where-visited.html - Tests :visited/:link behavior (not landed yet, CL).
wpt/css/selectors/invalidation/is.html - Invalidation of :is().
wpt/css/selectors/invalidation/where.html - Invalidation of :where().
wpt/css/css-shadow-parts/interaction-with-nested-pseudo-class.html - Tests behavior of :is() following ::part().

We could actually have some more tests for basic behavior. Somehow we mostly have tests for advanced cases. I'll add this before shipping.

Adding more tests SGTM!

 

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=568705

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5445716612I will add some more basic tests before shipping.743168

This intent message was generated by Chrome Platform Status.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKFBnUrj-bWBU3VeTD79GKSGbsw5Ox2UXDvarBdZY-eVLfJNQw%40mail.gmail.com.

[Anders Hartvoll Ruud]

On Fri, Oct 16, 2020 at 11:38 AM Yoav Weiss <yo...@yoav.ws> wrote:

LGTM1

On Fri, Oct 16, 2020 at 11:27 AM Anders Hartvoll Ruud <and...@chromium.org> wrote:

Contact emails

and...@chromium.org

Specification

https://drafts.csswg.org/selectors-4/#matches

Summary

The :is() pseudo class matches an element that matches any of the selectors in its argument. This is powerful when used in conjunction with combinators. For example, you can select all <hN> elements that are subsequent siblings of other <hN> elements like this: :is(h1, h2, h3, h4, h5, h6) ~ :is(h1, h2, h3, h4, h5, h6). To achieve the same without :is(), you'd need a very long selector list h1 ~ h1, h1 ~ h2, h1 ~ h3, ... (etc) ... h6 ~ h6.

The :where() pseudo class behaves exactly like :is(), except that its specificity is always zero.

The :is() / :where() pseudo classes introduce the <forgiving-selector-list> concept, which means that invalid selector arguments to :is() / :where() are dropped individually, rather than invalidating the entire selector. For example, :is(div, :nonsense, span) effectively parses and behaves like a valid selector :is(div, span). This I2S includes support for the <forgiving-selector-list> behavior.

Blink component

Blink>CSS

TAG review

None

I agree that a TAG review is not required as this is part of a WG spec and shipped by other vendors.

Risks

Interoperability and Compatibility

Gecko: Shipped

WebKit: Shipped (except <forgiving-selector-list> support)

Is there an open issue regarding the different behavior? This could result in compat issues, so it'd be good if we can get WebKit to align.

Hmm, I could not find any. I filed one now. https://bugs.webkit.org/show_bug.cgi?id=217814 

[Rick Byers]

LGTM2

FWIW most of the existing WPT test results can be seen here. I always like to double check this on intents where we're shipping something already shipped in other engines (it's not uncommon for there to be some confusion in what exactly "shipped" means).

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKFBnUqSKoNCufjuXwgoBcBZYmv1K9u%2BeddVitviR_0RbyF97Q%40mail.gmail.com.

[Chris Harrelson]

LGTM3

Would you mind emailing webkit-dev that we are now shipping and that this is a known potential source of interop?

 

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY-R0DhTHt7nTYhZOLwae%3D4zeOC-VBonAU75eSm05sijFQ%40mail.gmail.com.

[Anders Hartvoll Ruud]

Sure, done.

[Anders Hartvoll Ruud]

On Fri, Oct 16, 2020 at 2:31 PM Anders Hartvoll Ruud <and...@chromium.org> wrote:

On Fri, Oct 16, 2020 at 11:38 AM Yoav Weiss <yo...@yoav.ws> wrote:

LGTM1

On Fri, Oct 16, 2020 at 11:27 AM Anders Hartvoll Ruud <and...@chromium.org> wrote:

Contact emails

and...@chromium.org

Specification

https://drafts.csswg.org/selectors-4/#matches

Summary

The :is() pseudo class matches an element that matches any of the selectors in its argument. This is powerful when used in conjunction with combinators. For example, you can select all <hN> elements that are subsequent siblings of other <hN> elements like this: :is(h1, h2, h3, h4, h5, h6) ~ :is(h1, h2, h3, h4, h5, h6). To achieve the same without :is(), you'd need a very long selector list h1 ~ h1, h1 ~ h2, h1 ~ h3, ... (etc) ... h6 ~ h6.

The :where() pseudo class behaves exactly like :is(), except that its specificity is always zero.

The :is() / :where() pseudo classes introduce the <forgiving-selector-list> concept, which means that invalid selector arguments to :is() / :where() are dropped individually, rather than invalidating the entire selector. For example, :is(div, :nonsense, span) effectively parses and behaves like a valid selector :is(div, span). This I2S includes support for the <forgiving-selector-list> behavior.

Blink component

Blink>CSS

TAG review

None

I agree that a TAG review is not required as this is part of a WG spec and shipped by other vendors.

Risks

Interoperability and Compatibility

Gecko: Shipped

WebKit: Shipped (except <forgiving-selector-list> support)

Is there an open issue regarding the different behavior? This could result in compat issues, so it'd be good if we can get WebKit to align.

Hmm, I could not find any. I filed one now. https://bugs.webkit.org/show_bug.cgi?idSeems a bit simpler?=217814 

FYI, the forgiving behavior has now landed in WebKit. (Thanks Antti).

[一丝]

For the legacy `:-webkit-any()` selector, the `<forgiving-selector-list>` feature is also supported in Safari and Firefox, Chrome does not seem to support it, which has some interoperability differences.