Re: [csswg-drafts] [selectors][css-position-4] `:modal` pseudo-class needs to account for top layer exit animations (#13594)

So there's two pseudo-classes you could use for top layer animations on a dialog element, :open and :modal. Right now, they both match and stop matching at the same time, right? So today (in chromium) you can make a top layer exit animation using either of those:
```css
dialog {
  opacity: 0;
  transition: overlay 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

/* dialog:open and dialog:modal are interchangeable */
dialog:open,
dialog:modal {
  opacity: 1;
}
```

If we made :modal continue to match while the dialog is in the top layer, then opacity would not animate during the exit animation because it would continue to have opacity:1 match, right? Authors would have to know to use :open instead of :modal, which they might already be doing, but I'm not sure if this would break sites or not.

> I think it doesn't solve the problem of author styles on :modal changing the position though

What is the use case for authors? Couldn't they put their positioning styles on dialog even when it is closed? The reason that I added the :-internal-dialog-in-top-layer pseudo-class in chromium is because we have to differentiate between modal and non-modal dialogs, which is something that I don't imagine authors will be doing.

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


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

Received on Tuesday, 17 March 2026 18:45:32 UTC