css “:active” with right click, inconsistencies wi

Question

I just noticed an inconsistency between the way browsers handle the css :active state of an element when it is right-clicked (contextmenu click)

• Firefox: :active is not triggered
• Chrome: :active is triggered momentarily, until mouseup occurs
• Safari 5 & IE 10: :active is triggered and element remains :active until the contextmenu is closed

Here's a quick jsfiddle to replicate this http://jsfiddle.net/annam/tqBqV/

div { background: red; }
div:active { background: green; }

Anyone knows which is the correct behaviour? I guess there is no way to standardize?

Answer 1

Selectors 3 says :active is true when an element is being activated, and further defines activation via a pointing device such as a mouse to be when the primary button is pressed:

• The :active pseudo-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. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.

If a secondary click activates an element for the purposes of :active in a particular browser, then that browser is in violation of the spec (unless the browser claims only to implement CSS2.1, where this restriction is not set in stone, but that's not true for any of the browsers given).