[csswg-drafts] [selectors] :visible / :hidden (#7489)

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] :visible / :hidden ==
There is a mechanism to check an element’s visible status: [`Element.checkVisibility`](https://github.com/w3c/csswg-drafts/issues/6850). I see some use-cases for a `:visible` selector, which would match elements whose `Element.checkVisibility` check returns `true`. `:hidden` would go hand in hand with that and select the opposite set of elements. 

An example would be to _“style the first visible item in a list of items that can be dynamically filtered”_. To target said element, the selector would be `:nth-child(1 of > :visible)`. Prior Art is [jQuery’s `:visible` selector](https://api.jquery.com/visible-selector/), but don’t have any numbers on how much it was used.

There are some considerations to keep in mind with such a selector, though:

1. Performance: How performant is selecting all visible elements using `:visible`? My hunch would be that it’s not very performant.
2. Loops: Doing something like `:visible { opacity: 0; }` would make an element no longer visible, thus the selector would become unmatched.

That second issue is a broader CSS issue which could be solved by limiting which CSS properties can be changed when such an element is targeted. Just like [styling the pseudo `::first-line`](https://www.w3.org/TR/css-pseudo-4/#first-line-styling) and [styling highlights](https://drafts.csswg.org/css-pseudo/#highlight-styling) are limited to a set of allowed properties, these `:visible`/`:hidden` selectors could have a disallow-list of properties: `display`, `opacity`, …

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7489 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 12 July 2022 13:53:25 UTC