v152 · developer trial · css · dom

CSSPseudoElement interface probes

Chrome 152 exposes Element.pseudo(type) for supported pseudo-elements such as ::before, ::after, and ::marker, and pairs that with event.pseudoTarget for event attribution. These demos show the working API surface and include runtime probes where generated examples used to over-promise support for ::backdrop and view-transition pseudos.

concepts

  1. Backdrop Click

    A real dialog with a styled ::backdrop. The page probes dialog.pseudo("::backdrop"), shows that current Chrome does not expose it as a listenable pseudo, and uses the reliable dialog-rect hit-test to close on backdrop clicks.

  2. Transition listener

    Starts real view transitions, logs ready / finished, and probes whether this browser accepts view-transition pseudo selectors through Element.pseudo().

  3. View Transition Pseudo-elements

    Trigger cross-element view transitions and compare the standard transition lifecycle with any pseudo-element handles that experimental builds expose.

  4. Pseudo-element Explorer

    Interactive gallery for supported Element.pseudo() handles plus computed-style-only pseudos. Pick a pseudo type, inspect feature probes, read computed styles, and live-edit the generated CSS.

  5. Compatibility Lab

    Probes Element.pseudo() for every pseudo type — ::before, ::after, ::marker, ::backdrop, view-transition pseudos — and shows which return a live CSSPseudoElement vs null. Provides the getComputedStyle(el, pseudo) fallback for non-object pseudos.

why it shipped

Pseudo-elements such as ::before, ::after, and ::marker can now be inspected as CSSPseudoElement objects instead of approximated through host-element styles. Other pseudos, including ::backdrop, are still useful through CSS and getComputedStyle(el, "::backdrop"), but should be feature-detected before a demo claims they are listenable objects.

references