v152 · CSS · DOM

Compatibility Lab

Probe the Chrome 152 CSSPseudoElement expansion for ::backdrop, ::scroll-marker, and view-transition pseudo-elements. Each lab attempts the real Element.pseudo(type) call, reports what handle came back, and keeps a usable fallback when this browser has not shipped a particular pseudo yet.

Element.pseudo() checking
CSSPseudoElement checking
scroll-marker selector checking
View Transition API checking
Running capability checks...

::backdrop

Open a real modal, probe dialog.pseudo("::backdrop"), and compare CSSPseudoElement click handling with the dialog-rectangle fallback.

pseudo()not probed
eventsno clicks yet
computed stylenot read

::scroll-marker

Use generated scroll markers as a carousel control surface and probe whether their CSSPseudoElement handles can receive click listeners for analytics.

One

Each slide creates a ::scroll-marker pseudo-element from its data-marker attribute.

Two

Click generated markers in supporting browsers, or use the buttons to move the scroll snap position.

Three

The lab records whether slide.pseudo("::scroll-marker") returns a handle and whether that handle is an event target.

active slidenot measured
pseudo()not probed
marker clicks0 CSSPseudoElement clicks recorded

view-transition pseudos

Start an actual view transition, then probe ::view-transition, ::view-transition-group(), and image-pair pseudos while the transition is ready.

state A
lifecyclenot started
handlesnot probed
animationsnot measured

baseline pseudos

Keep the older ::before, ::after, and ::marker checks nearby so the new Chrome 152 pseudos can be compared with already-defined handles.

host element
  • marker probe item

CSSPseudoElement support matrix

pseudo type target Element.pseudo() result why this case matters

Runtime log


  

References

Backdrop target

Click outside this dialog. A browser with ::backdrop CSSPseudoElement support may expose the backdrop as the click's pseudo target. The rectangle fallback still closes the dialog when the API is absent.