Skip to content

[Popup] How should the "popup is top layer" CSS pseudo class behave, and what should it be called #470

@mfreed7

Description

@mfreed7

This has been discussed in #311, particularly around this comment. Given the new approach for popup, and the associated resolutions not to have a "live" open content attribute, we need to revisit this issue. The questions:

  1. Should there be a CSS pseudo class that indicates when the popup is "open"?
  2. What should "open" mean here - in the top layer? Visible at all?
  3. What should the pseudo-class be called?
  4. Should this pseudo class apply to other top layer elements, like modal <dialog> and fullscreen elements?

In my view:

  1. We should have a CSS pseudo class, to allow developers to style "open" vs. "closed" popups differently, and allow animations between these states. Note visibility: hidden vs. other choices mfreed7/popup#3, which is relevant here, since I believe a conclusion we're coming to is that both states (open and closed) should be developer-stylable. The only difference really being whether the popup is in the top layer.
  2. Given the above, I think the pseudo class should simply indicate top layer status. Visibility is controlled by the developer, so this pseudo class shouldn't be concerned with visibility. It should just indicate whether the given element is in the top layer.
  3. And given that, I think the new class should be called :toplayer or something similar, rather than :open which can be confusing for a popup that is "closed" but "visible" in the page.
  4. For consistency, I think we should push for this pseudo class to apply to any element that currently resides in the top layer, no matter how it got there. So include modal <dialog> and fullscreen elements.

Thoughts appreciated.

Metadata

Metadata

Assignees

No one assigned

    Labels

    popoverThe Popover API

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions