11

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
anna.mi
  • 1,549
  • 1
  • 14
  • 28
  • `:active` is generally meant for left-click – Mr. Alien Apr 10 '13 at 11:50
  • @Mr.Alien exactly :) ideally for it would never trigger on right-click, but alas, it does, and inconsistently! – anna.mi Apr 10 '13 at 11:51
  • 2
    "(and here's some useless code because sa requires code when a js fiddle link is given)" jsFiddle is not loading for me, so I can't tell if that code is really meant only to skirt the quality filter which is designed precisely for situations such as when jsFiddle refuses to load, or if the code comes from your fiddle which would obviate, and not to mention contradict, such an editorial comment. – BoltClock Apr 10 '13 at 11:56

1 Answers1

12

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).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • +1. Worth pointing [to the spec](http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes) directly, as it is deliberately vague: "CSS does not define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements." – CherryFlavourPez Apr 10 '13 at 11:56
  • @CherryFlavourPez: I updated with a link to the more recent spec, which *does* define it to some extent. The CSS2.1 selector spec can be considered obsolete for browsers that implement Selectors 3+. That said I'll edit my answer again to elaborate on this. – BoltClock Apr 10 '13 at 11:57
  • 1
    so firefox has it right by not triggering :active at all! and safari & ie not only violate the "primary key only" rule, they also violate the "between the time the user presses the mouse and releasing it" rule by maintaining the :active state even after the mouse button is released. thanks a lot! – anna.mi Apr 10 '13 at 12:00
  • 3
    I filed a Chrome bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=966255 – Olson.dev May 23 '19 at 00:16