[selectors] Should `:active` match spacebar down?
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- Avg merge
- 2d 18h
- Merged PRs (30d)
- 24
Description
From the Selectors Level 4 specification
The
:activepseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
The :active pseudo-class is useful for providing immediate feedback about the expected click behavior of an element.
Its usage is well documented, in sources from Adobe, Google, Salesforce, Tailwind, and CSS Tricks.
The :active pseudo-class is versatile for pointers, in that it is not limited to specific elements.
p:active { background: #eee; }
There is a keyboard limitation to the :active pseudo-class that many sources do not mention. Between the time a user presses the spacebar and releases it, the :active pseudo-class is only ever applied to a <button> element. Some resources may even suggest that the pointer-triggered :active and the keyboard-triggered :active should always work the same.
The
:activepseudo-class is used to style an element that has been “activated” either by a pointing device or by a tap on a touchscreen device. It can also be triggered by the keyboard, just like the:focuspseudo-class.
— An Ultimate Guide To CSS Pseudo Classes And Pseudo Elements. Smashing Magazine
It is my belief that :active state is equally valuable to style for both keyboard and the pointer interactions.
Should the :active pseudo-class apply to any active element between the times the user presses the spacebar and releases it?
I think opening this behavior up to all elements should be considered, or perhaps alongside some other mechanism like :focusable.
I do not know for certain why :active does not behave this way already, but I suspect it is related to the early WWW distinctions between hyperlinks and buttons, similar to how a spacebar press-and-release does not “click” a hyperlink. This is a problematic guess, tho, since the :active state applies to non-clickable elements when used with a pointer.
I was confused by a note in the specification that reads “there may be document-language or implementation-specific limits on which elements can become :active.” This note links to the HTML5 specification which defines a list of activatable elements. However, the HTML5 specification does not list any special criteria for spacebar interaction, and the criteria for :active — which includes “if the element is focusable” — suggests to me that it could apply to any element activated.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Selectors Level 4 section on the :active pseudo-class and the linked HTML specification’s activatable-elements and focusable-elements definitions. Compare the documented pointer and spacebar behavior, then determine whether the specification needs a clarified or changed rule. Done means the working-group question has a resolved normative direction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100