Re: [csswg-drafts] [selectors] Add :modal-dialog pseudo-class (#6965)

> To try and summarize, the current preference is two top layers, a UA top layer and a developer top layer, where the UA one is "above" the developer one. Is that right?

It does seem that the preference **here in this issue** is to have two top layers. However, in OpenUI, we've been actively discussing [the Popup API](https://open-ui.org/components/popup.research.explainer) for the last ~year or so, which would be another entry-point to the top layer. For that API, we found that a CSS-based solution **would not work**, for the reasons detailed in [this section of the "alternatives" document](https://open-ui.org/components/popup.proposal.alternatives#alternative-css-property). Primarily, the two-class top-layer would preclude several very common use cases like having a tooltip on top of a dialog.



> > should we have a :modal-dialog pseudo-class or should we have a :top-layer pseudo-class[?]
> 
> How about adding a `modal` attribute to `<dialog>` and using an attribute selector to target it? At the moment there is an `open` attribute, but it shows in both modal and non-modal settings.

We also discussed this issue, content attribute vs. pseudo-class, [in this issue](https://github.com/openui/open-ui/issues/311) (among others). The existing **live** `open` attribute on `<dialog>` [already causes issues](https://github.com/whatwg/html/issues/5802), and might have been a mistake. What we found in working on the Popup API was that there are precisely two use cases for the live `open` attribute:
 - Styling `foo[open]` differently from `foo:not([open])`. This use case is perfectly satisfied if there's an equivalent CSS pseudo class.
 - Wanting the popup to be shown *on page load*, without script. This use case was satisfied by adding a `defaultopen` content attribute that only controls the loading behavior, and is not live.

For these reasons, I'd advocate for just a CSS pseudo class. And as I mentioned up-thread, I think it'd be good to make that pseudo class valid for **any top layer element**, not specific to modal `<dialog>`. We [need such a pseudo class for the Popup API](https://github.com/openui/open-ui/issues/470), and I'd love to re-use the same one here if possible. As @vmpstr  points out, a common `:top-layer` pseudo class might also help solve https://github.com/w3c/csswg-drafts/issues/6939 for fullscreen.

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


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

Received on Monday, 11 April 2022 22:58:09 UTC