- From: CSS Meeting Bot via GitHub <sysbot+gh@w3.org>
- Date: Wed, 29 Jun 2022 17:02:44 +0000
- To: public-css-archive@w3.org
The CSS Working Group just discussed `:top-layer pseudo-class`. <details><summary>The full IRC log of that discussion</summary> <fantasai> Topic: :top-layer pseudo-class<br> <fantasai> github: https://github.com/w3c/csswg-drafts/issues/7319<br> <fantasai> ????: I've been working on [missed]<br> <fantasai> ????: We resolved to create :modal, for all things that are modal, starting with modal dialog<br> <vmpstr> s/????/masonf/<br> <fantasai> masonf: Raised this issue for what's the pseudo-class for things in the top layer<br> <fantasai> masonf: We need this so that pop-up can have different styling/animations when it's in the top layer<br> <fantasai> masonf: There's a bit of a nuance, when animating in or out, will be in top layer but not match the pseudo-class<br> <fantasai> masonf: so maybe need a pseudo-class that is more specific<br> <fantasai> masonf: but the question is whether to have such a pseudo-class, and what should it be called<br> <ntim> q+<br> <fantasai> masonf: An alternative is to create a top-layer element in HTML, and allow using structural pseudos<br> <fantasai> masonf: I'm relatively agnostic, thing any of these can work with popup API<br> <astearns> ack ntim<br> <fantasai> ntim: I'm quite against the :top-layer pseudo-class, as I mentioned in the issue, I think it doesn't speak to what developers generally want<br> <fantasai> ntim: For :modal, can describe what :modal is<br> <fantasai> ntim: But for :top-layer, can't really describe top-layer, doesn't really speak to developer perspective, more of implementer perspective<br> <fantasai> ntim: I think ?? helps a bit more, but concept of top layer itself is very specific to browser engine worldview<br> <fantasai> ntim: I don't think it should exist in the current proposed way<br> <fantasai> ntim: It's also hard to describe what's the relation with the popup API<br> <fantasai> ntim: Why open popup in the top layer ... it's not straightforward for developers<br> <fantasai> masonf: You said you're against the whole thing, but your complaint seems to be about the name, is your complaint the name or the concept?<br> <fantasai> ntim: It's the name, but<br> <fantasai> ntim: the concept itself is also a hack<br> <fantasai> ntim: it's a hack by itself<br> <fantasai> masonf: can you clarify?<br> <fantasai> masonf: top-layer is well-defined for fullscreen and modal, how is it a hack?<br> <fantasai> ntim: In a way it's a well-defined concept, sure, but it only exists because there's no way to display everything on top with z-index<br> <fantasai> ntim: that's the only reason it exists<br> <fantasai> ntim: it's a hack in that sense, it's a concept that only exists for a certain thing<br> <masonf> q?<br> <fantasai> dbaron: Is your objection that you'd rather see separate pseudo-classes for things that put things in the top layer, if there's need for those pseudo-classes?<br> <fantasai> ntim: yes<br> <fantasai> astearns: We've had discussion about scoping things to particular UI elements, and wantng to prefer more generic pseudos<br> <fantasai> ntim: If you want generic pseudo-classes, I think something that speaks more to web developers, something like :open vs :top-layer<br> <fantasai> ntim: Idk<br> <fantasai> masonf: Open is also very very overloaded, and can be confusing<br> <chrishtr> q+<br> <fantasai> masonf: top-layer is very descriptive, it's either in the top layer or not<br> <fantasai> masonf: agree it's a hack to get around z-index, but it's well-defined whether it's in top layer or not<br> <fantasai> masonf: could also create something specific like :open-popup, but if we want to be more generic ...<br> <astearns> ack chrishtr<br> <fantasai> chrishtr: Following pattern of :modal class, we want to describe well-defined behaviors, what is the underlying UI state that this is matching against?<br> <fantasai> chrishtr: In :modal, it's the modalness, can't interact with other things<br> <fantasai> chrishtr: just need to come up with other names<br> <fantasai> chrishtr: maybe make specific to the element?<br> <fantasai> astearns: It's a push me pull you<br> <fantasai> astearns: making something generic to the property that we're trying to select<br> <fantasai> astearns: works really well until we really need to distinguish between the two different things that ahve this property that never want to be styled together<br> <fantasai> astearns: unfortunately we go back and forth quite a bit<br> <fantasai> chrishtr: if developer wants to do that, they could combine attribute selector with pseudo-classes, to distinguish between different types of the element in the popup state<br> <fantasai> astearns: that's tru<br> <astearns> ack fantasai<br> <TabAtkins> fantasai: Not trying to select the topmost item in the top layer, but all of them, right?<br> <TabAtkins> masonf: yes<br> <TabAtkins> fantasai: So if you have multiple dialogs and a popup in there, they're all amtched<br> <TabAtkins> masonf: Yeah, they're all in there. Suggestion by bramus for a ::top-layer pseudo-el that wuold let you select the top-most one, but as a pseudo-class it gets them all<br> <bradk> :nth-layer(n) maybe?<br> <tantek> s/wuold/would<br> <TabAtkins> fantasai: Okay also there was something about animation state and popups, making this not match? Not sure what that is about.<br> <TabAtkins> masonf: It's somewhat peripheral, but for popups you can animate it to show or hide. There's two stages - it gets put into the top layer, and need a way to select when it's being shown, and reverse when hidden.<br> <TabAtkins> masonf: Think that's very specific to the popup api<br> <TabAtkins> fantasai: Wouldn't you want to do that with the fullscreen or dialog as well?<br> <TabAtkins> masonf: Yeah might be more general. Let's takl about top-layer first tho, if there's a transitional state we can discuss that<br> <TabAtkins> fantasai: So it sounds like you want to select top-layer and topmost-layer?<br> <TabAtkins> masonf: I think it's needed for top layer, but I have heard requests for topmost.<br> <TabAtkins> fantasai: Okay. I agree top layer isn't ideal term since it's confusable with other things, but we can come up with names.<br> <TabAtkins> fantasai: First question is just whether we want to add the pseudo at all.<br> <fantasai> TabAtkins: I might have raised that<br> <fantasai> TabAtkins: big deal is things that UA puts in top layer, and things that CSS puts in top layer, still want to be distinct<br> <fantasai> TabAtkins: need to have a discussoin about it<br> <fantasai> TabAtkins: it's a complicated issue to get the UI right<br> <fantasai> ??: Are there things CSS can put in the top layer? I think it's just APIs like fullscreen right now<br> <masonf> https://open-ui.org/components/popup.proposal.alternatives#alternative-css-property<br> <TabAtkins> s/??/ntim/<br> <fantasai> astearns: We are at time<br> <fantasai> astearns: Has OpenUI discussed pseudo-class vs pseudo-element?<br> <fantasai> masonf: We resolved on pseudo-class :top-layer<br> <fantasai> astearns: What about pseudo-element?<br> <fantasai> masonf: can take it back to Open UI<br> <fantasai> astearns: ok, going to close for today, but can bring it back soon<br> </details> -- GitHub Notification of comment by css-meeting-bot Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7319#issuecomment-1170244887 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 29 June 2022 17:02:46 UTC