CSS :active selector does not work on HTML <area>s
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
People
(Reporter: psychpsyo, Unassigned)
References
Details
Attachments
(3 files)
Labrador_on_Quantock image for testcase
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0
Steps to reproduce:
I tried to change the CSS cursor property on an <area> element with both a :hover and an :active pseudo-class.
Actual results:
Using :hover works, but using :active does not.
Expected results:
A selector like area:active should allow styling the cursor when the clickable region of the area is clicked.
This works in Chrome. The spec is silent on what should happen here.
I've also opened a spec bug here: https://github.com/whatwg/html/issues/11509
|
||
Comment 1•10 months ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
|
||
Comment 2•9 months ago
|
||
The severity field is not set for this bug.
:alaskanemily, could you have a look please?
For more information, please visit BugBot documentation.
|
||
Updated•9 months ago
|
|
|
||
Updated•9 months ago
|
|
|
||
Comment 3•9 months ago
|
||
(In reply to psychpsyo from comment #0)
This works in Chrome. The spec is silent on what should happen here.
Could you share a testcase that demonstrates the behavior-difference?
I poked at this in a local testcase when I saw this bug go by in my bugmail last week, but I didn't find very many properties that were meaningfully usable on <area> (since area is sort-of a non-rendering element), so that makes it a bit hard to come up with a testcase that shows whether or not :active and :hover are applying or not.
|
|
||
Updated•9 months ago
|
(In reply to Daniel Holbert [:dholbert] from comment #3)
(In reply to psychpsyo from comment #0)
This works in Chrome. The spec is silent on what should happen here.
Could you share a testcase that demonstrates the behavior-difference?
I poked at this in a local testcase when I saw this bug go by in my bugmail last week, but I didn't find very many properties that were meaningfully usable on
<area>(sinceareais sort-of a non-rendering element), so that makes it a bit hard to come up with a testcase that shows whether or not:activeand:hoverare applying or not.
Yes, here's a testcase, using the cursor property. (Which is the only property that I've found to be useable on <area>s in Firefox)
In Chrome, you can hover and click the dog's head and the cursor changes for both. In Firefox, it only changes on hover, not when clicking.
<!DOCTYPE html>
<style>
#head:hover {
cursor: grab;
}
#head:active {
cursor: grabbing;
}
</style>
<img usemap="#map" src="https://upload.wikimedia.org/wikipedia/commons/3/34/Labrador_on_Quantock_%282175262184%29.jpg">
<map id="map">
<area shape="rectangle" coords="100,100,400,400" id="head">
</map>
|
||
Comment 5•9 months ago
|
||
I can reproduce the issue on Nightly144.0a1 Windows11.
However, interestingly, enabling the pseudo-class active for that element from the inspector, the cursor changes as expected.
So, for some reason, it seems that the element does not become active when the mouse is clicked.
|
|
||
Comment 6•9 months ago
|
||
|
|
||
Comment 7•9 months ago
|
||
|
|
||
Comment 8•9 months ago
•
|
||
I see the same thing that Alice0775 White describes.
Here's another testcase where I've added an img:active style which adds a red outline around the image. This shows that Firefox considers the img to be :active when clicked (no matter where you click it) whereas Chrome does not consider the img to be :active specifically if you click the <area>. (If you click outside the <area>, though, then the img does gain :active as shown by it getting a red outline.)
[edited to clarify that Chrome does show a red outline if you click outside the area]
|
|
||
Comment 9•9 months ago
•
|
||
(Safari seems to match Firefox on this - having the img become :active when clicked, regardless of where you click the img So Chromium is perhaps on their own here.)
|
|
||
Comment 10•9 months ago
|
||
Arguably Chrome's behavior is a bit unfortunate & not especially useful here, specifically because:
(1) :active is largely useful as a way to let an author use CSS properties to show visual feedback that something was clicked/activated.
(2) CSS properties basically have no visible effect on <area> elements per comments 3 and 4. (cursor being the exception)
(3) So if you want to use any other sort of visual effect besides cursor to show that an image-map was clicked, Chrome's behavior prevents you from doing that (specifically if you click an <area>); whereas Firefox/Safari allows you to. (The Firefox/Safari behavior is limited as well, since it only lets you add styles to the img-as-a-whole, and it doesn't let you vary the styling based on which piece of the img was clicked. But on the whole it seems more useful than the Chrome behavior, as things currently stand at least.)
|
Reporter | |
Comment 11•9 months ago
|
||
I feel like the optimal solution would be for :hover and :active to match both the area and the img in these cases. That seems like the best of both worlds. (if it doesn't add a bunch of implementation complexity, I guess)
Description
•