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

86 views
Skip to first unread message

Anders Hartvoll Ruud

unread,
Oct 16, 2020, 5:27:14 AM10/16/20
to blink-dev

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 combinatorsFor 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

unread,
Oct 16, 2020, 5:39:03 AM10/16/20
to Anders Hartvoll Ruud, blink-dev
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 combinatorsFor 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!
 
--
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

unread,
Oct 16, 2020, 8:31:58 AM10/16/20
to Yoav Weiss, blink-dev
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 combinatorsFor 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

unread,
Oct 16, 2020, 11:07:18 AM10/16/20
to Anders Hartvoll Ruud, Yoav Weiss, blink-dev
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).

Chris Harrelson

unread,
Oct 16, 2020, 12:41:44 PM10/16/20
to Rick Byers, Anders Hartvoll Ruud, Yoav Weiss, blink-dev
LGTM3

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

Anders Hartvoll Ruud

unread,
Oct 16, 2020, 1:05:40 PM10/16/20
to Chris Harrelson, Rick Byers, Yoav Weiss, blink-dev
Sure, done.

Anders Hartvoll Ruud

unread,
Oct 21, 2020, 1:52:04 PM10/21/20
to Yoav Weiss, blink-dev
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 combinatorsFor 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).
Reply all
Reply to author
Forward
0 new messages