Re: [csswg-drafts] [selectors] Add `:top-layer` pseudo class (#7319)

> I don't think it's a concept that speaks for starters/most people. Web devs know that a certain element is fullscreen, or a certain dialog is open/modal. Blog posts might explain that those things appear on top of all other elements, but without mentioning "top layer".

I'm very open to suggestions for a better name.

> Also, there is the confusion that we had on the WebKit team, on whether an element is a top layer, or is part of a set of elements called "the top layer". I think this pseudo class also has this ambiguity, e.g. `:modal` means this element is modal, so by the logic `:top-layer` means: this element is a top layer.

This is a really great point. My intention was for just the element itself to match `:top-layer`. I.e.,

```html
<dialog open><div></div></dialog>
<script>
  document.querySelector('dialog').matches(':top-layer'); // true
  document.querySelector('div').matches(':top-layer'); // false
</script>
```




> 
> @mfreed7 I think the more important question here is: What use case does this solve for the Popup API?
> 
> From what I can understand, we didn't go with something like `:popup-open`, in case a web developer wants to use a CSS transition to open the popup, where the closed state is not in the top layer, but the open state is. That design seems flawed to me, because I would expect the popup to be in the top layer while the transition is happening (regardless whether it is closing/opening), mainly because pushing/popping the top layer applies a couple of style adjustments, changes the stacking context, containing block, etc. which makes it inefficient to transition (and potentially could end up in broken results with the containing block changing during the transition). So if the popup is closing, the popup should only be removed from the top layer when the transition for closing is done. If implemented this way, the `:top-layer` pseudo class would still match even though the popup is closing...

On the general question of how the Popup API will support animations, please see https://github.com/openui/open-ui/issues/335, and in particular, this comment https://github.com/openui/open-ui/issues/335#issuecomment-1130572590. TL;DR, the Popup API will have a two-stage update for show/hide, which will allow animations to run after adding, or before removing, a popup from the top layer. As you mentioned, that means `:top-layer` will match during the transition. But that's actually the point - it is very ergonomic:

```css
[popup] {
  opacity: 0;
  transition: opacity 1s;
}
[popup]:top-layer {
  opacity: 1;
}
```

> 
> I generally think a `:top-layer` pseudo class should not exist, and instead the popup API use case should be addressed using something like `:popup-open`.

Certainly just going with `:popup-open` achieves all of the use cases for the popup API. However, the resolution (https://github.com/w3c/csswg-drafts/issues/6965#issuecomment-1118033655) for `:modal` seems to indicate that CSSWG prefers to have more general pseudo classes for concepts. This would be exactly the opposite conclusion.

-- 
GitHub Notification of comment by mfreed7
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7319#issuecomment-1144209199 using your GitHub account


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

Received on Wednesday, 1 June 2022 22:33:40 UTC