Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add table of :has() support for each pseudo-class #17818

Open
jensimmons opened this issue Sep 16, 2022 · 2 comments
Open

Add table of :has() support for each pseudo-class #17818

jensimmons opened this issue Sep 16, 2022 · 2 comments
Labels
data:css 🎨 Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS

Comments

@jensimmons
Copy link
Contributor

jensimmons commented Sep 16, 2022 •
edited
Loading

What type of issue is this?

Missing compatibility data

What information was incorrect, unhelpful, or incomplete?

Currently, MDN BCD has a single row of compat data about :has().

It would be helpful for there to instead be a much larger set of data that enumerates what arguments are supported inside of :has().
For example:

  • :has(:not)
  • :has(:first-of-type)
  • :has(:modal)
  • :has(:playing)
    and there are many, many more.

Some of these are supported in certain browsers. Others are not. Right now there's not a canonical place for developers to look up what is and is not supported.

Pseudo-elements are not supported inside :has(). :has(:has( )) is not allowed. And there are other restrictions according to the standard / see CSSWG resolutions.

What browsers does this problem apply to, if applicable?

No response

What did you expect to see?

No response

Did you test this? If so, how?

No response

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

No response

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

MDN metadata

No response
@jensimmons jensimmons mentioned this issue Sep 16, 2022
Closed
@queengooborg queengooborg added the data:css 🎨 Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS label Sep 17, 2022
@foolip
Copy link
Collaborator

foolip commented Oct 3, 2022

Does this break down into different categories of things that work and don't work, or is it a question of per-pseudo-class support or bugs?

Taking :not as the first example, I found https://wpt.live/css/selectors/invalidation/has-with-not.html, and I see Chrome and Safari passes the tests, but Firefox fails some of them.

It's hard to find a Gecko bug, because the words "has" and "not" are not very searchable.

@jensimmons
Copy link
Contributor Author

I believe it would be most useful as a list of support broken out per pseudo-class.

I'm imaging a table like this:
https://docs.google.com/spreadsheets/d/1NZeNiJqOEiphHJiAIB9iWsp2yxsn8fsqAJj1syM6K10/edit#gid=0

(We are working on filling in all the Safari data... the yellow cells need confirmation of our support.)

Without a matrix like this, it will be hard for web developers to know when they can use a pseudo-class inside :has(). If I kept trying to write such code, but weirdly a bunch of the time it didn't work reliably... I'd start doubting :has() in general.

:has() is great. I don't want web developers to doubt it. I want them to be able to look up a chart and see, for example "oh, :has(:lang()) only works in 1 browser, not all... ok... I won't use that then... but looking at this chart, I can see that :has() itself is reliable in other situations."

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
data:css 🎨 Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jensimmons @foolip @queengooborg