Intent to prototype and ship: CSS :is() and :where() pseudo-classes.

[Emilio Cobos Álvarez]

Someone nerd-sniped me this week, sorry :)

Summary: Implements the :is() and :where() pseudo-classes from the CSS
selectors level 4 spec. These allow to adjust the specificity of
selectors and write selectors that weren't possible before.

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1509418

Standard:

* https://drafts.csswg.org/selectors/#matches
* https://drafts.csswg.org/selectors/#zero-matches

Platform coverage: All

Preference: layout.css.is-where-selectors.enabled

Devtools bug: N/A: Devtools doesn't have autocomplete or such features
for selectors, and I think everything else should work out of the box.
But let me know if you disagree.

Some better tools to visualize specificity or such would be great, but a
bit unrelated to this.

Other browsers:

* Safari: Implemented in TP. They have shipped since forever an
outdated version of the spec (:matches instead of :is).

* Chrome: They had a bogus implementation that never shipped.

web-platform-tests:

There are a few in https://wpt.fyi/results/css/selectors and in the
invalidation subdirectory, which is great because invalidation of these
is tricky. But there are a few other tests missing which I want to add
before enabling the pref in all channels.

Secure contexts: Like all other CSS selectors these are not restricted
to secure contexts.

Is this feature enabled by default in sandboxed iframes?: Yes

-- Emilio

[Emilio Cobos Álvarez]

On 4/18/20 1:49 AM, Emilio Cobos Álvarez wrote:
>  * Safari: Implemented in TP. They have shipped since forever an
> outdated version of the spec (:matches instead of :is).

Clarification: It seems WebKit only supports :is(), not :where().

-- Emilio

[sime....@gmail.com]

> Clarification: It seems WebKit only supports :is(), not :where().

Safari Technology Preview 107 supports both :is() and :where().

Test page: https://jsbin.com/kuxoxix/edit?html,css,output