Pseudo States Style Introspection (ala :hover)

[thysultan]

Introduction

The getComputedStyle API currently only allows a user to get the current computed state, leaving much-to desired should the author want to probe for a specific state such the :hover state or :focus-within.

Use Cases (Recommended)

At present you need special privilege(as an extensions or debug session) to get the pseudo states of an element i.e the CSS.forcepseudostate API currently present in Chrome that dev tools and other debug applications use to toggle programmatically between an elements pseudo states.

Goals (Optional)

• An API to be able to force an element into a particular state programmatically.
• And or the ability to the computed styles of a particular state getComputedStyle(node, ":hover").

Non-goals (Optional)

• It is not a goal to allow any arbitrary state, just the standard i.e :active, :focus, :focus-within, :focus-visible, :hover.

Proposed Solution

• Just as getComputedStyle accepts a second parameter for a pseudo element getComputedStyle(node, "::before"), the same could be extended to accept getComputedStyle(node, ":hover") for the introspection of psuedo states.

• CSS.forcePseudoState(":hover") to force an element into a particular psuedo state.

Examples (Recommended)

Chrome Developer Tools has the ability to force :hover, :focus states of an element to preview the styles that are applied when those states are active.

Alternate Approaches (Optional)

Currently there's no way to get the hover state without establishing control of both sides, that is both the provider(author) and consumers(the tool trying to introspect) i.e in using a div.hover, div:hover class in addition to a :hover state and managing the mouseenter state to trigger the class.

Privacy & Security Considerations

The :visited state, but those issue have been tackled in previous introspections of its use and issues. The same mitigations would apply in this case.

Let’s Discuss (Optional)

Should allowance be made for custom states forcePseudoState(":walking") that can be toggled.