The :active and :hover quirk

Edit New

The :active and :hover quirk

[6] :active 擬似クラスは、活性状態にある要素を表します。

仕様書

意味

[7] :active 擬似クラスは要素が活性化中 (being activated) の時適用されます。 >>5

[8] 例えば利用者がマウスのボタンを押してから離すまでの間適用されます。 >>5

[53] マウスのボタンが複数ある場合には、一次 (primary) 活性化ボタン (通常は左ボタン) やそれと同義のものにのみ適用されます。 >>5

[9] 文書言語や実装によっては活性状態となる要素に制限があるかもしれません。 >>5

[39] 要素が活性化中かどうかは、次のように決定しなければなりません >>38。

  1. [80] 子孫が :active なら、活性化中です。ここで終わります。
  2. [81] 被ラベル付け制御子が :active な label 要素なら、活性化中です。ここで終わります。
  3. [82] button 要素か、 <input type=submit>, <input type=image>, <input type=reset>, <input type=button> なら、
    1. [83] 形式的活性化状態でありかつ無効でないなら活性化中で、 それ以外なら活性化中ではありません。ここで終わります。
  4. [84] menuitem 要素なら、
    1. [85] 形式的活性化状態でありかつ disabled 属性がないなら活性化中で、それ以外なら活性化中ではありません。ここで終わります。
  5. [86] <a href>, <area href>, <link href> か、 tabindex focus flag が設定された要素なら、
    1. [87] 形式的活性化状態なら活性化中で、それ以外なら活性化中ではありません。 ここで終わります。
  6. [88] 活性的に指示されているなら、活性化中です。
  7. [89] それ以外なら、活性化中ではありません。

[50] 例えば、鍵盤のスペース・バーを押下することによってボタンを押す場合、 keydown 事象を受け取ってから keyup 事象を受け取るまでの間、 :active に一致します。

[51] 例えば、マウスのボタンが押されてから離されるまでの間、 :active に一致します。

[41] 活性化動作の実行が :active 状態にある時間に影響しますが、 活性化動作が定義されているかどうかとどの要素が :active 状態となるかは関係ありません。

:active と :hover の奇癖

[58] :active と :hover の奇癖 (the :active and :hover quirk) は、 奇癖モードで適用される規定であり、次の条件を満たす結合選択子は :any-link に一致しない要素に一致しないこととしなくてはなりません >>57。

[68] これは初期の CSS の実装が :active や :hover をリンク要素にのみ適用させており、それを当てにしたスタイル・シートを使っている文書との互換性のために必要となった規定です。

歴史

CSS1

[37] :active は >>36 で追加されました。

[19] CSS1 では :link や :visited と排他的であるとされていました。

[20] CSS1 では a 要素の href 属性があるものに適用されるとされていました。

CSS2

[16] >>35 で :active は :link や :visited とは独立して適用されるように改められました。

[17] CSS2 で :active はリンク以外にも適用されるように改められました。

CSS UI

[24] 古い CSS UI の仕様は 'user-input: enabled' な要素にだけ :active が適用される、と改訂していましたが、この仕様は放棄されて現在に引き継がれていないようです。 >>32 の次の CR で削除されています。

[21] >>8, >>53 の規定は元々 CSS に含まれておらず、 >>23 より CSS UI 仕様に差分として含まれていましたが、 後に選択子3仕様書に取り込まれています (>>33)。

[34] 現在でも >>22 に残っていますが、そのうち削除されるのではないでしょうか。
[55] しかし >>54 にも >>53 は残っています。

[30] Web Controls 1.0 は CSS UI を更に拡張してWebアプリケーションが状態を変化させられるような構想を持っていました。

選択子3

[10] :active な要素の親要素もまた :active な状態かどうか、選択子の仕様としては定義しないとされています。 >>5

[11] しかし実際には多くの Webブラウザーで親要素もまた :active となるため、著者もそれを前提にしているようです。これを踏まえて後に HTML の仕様で正確な動作が規定されています (>>39)。

HTML

[2] IRC logs: freenode / #whatwg / 20101228 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20101228#l-440>

  • [20:51] <TabAtkins> Hixie: Any reason why the section on CSS pseudoclasses only mentions a restricted list of elements that can match :active, when in practice all browsers allow all elements to be :active while they are clicked?
  • [21:38] <Hixie> TabAtkins: iirc it was based on a request of the csswg, but honestly i don't recall
  • [21:38] <Hixie> well
  • [22:08] <TabAtkins> Hixie: I suspect it was a request from fantasai, since she dislikes the idea of arbitrary elements being activatable.
  • [22:09] <TabAtkins> Hixie: In any case, all browsers allow all elements to be :active.
  • [22:09] <TabAtkins> I can file a bug if it would help.
  • [22:12] <Hixie> TabAtkins: yeah, file a bug or send e-mail. IE didn't used to do this like the others.
  • [22:13] <TabAtkins> Yeah, but they didn't use to do :hover on non-links either.
  • [22:13] <TabAtkins> Will file.
  • [22:13] <Hixie> so?
  • [22:13] <Hixie> we're talking about :active, not :hover :-)
  • [22:13] <Hixie> if we do change this we'll have to define what :active means
  • [22:13] <TabAtkins> Right, but they're done through similar events, and conceivably are handled similarly in the browser.
  • [22:13] <Hixie> and how to do it from the keyboard
  • [22:14] <TabAtkins> You still can't activate arbitrary elements from the keyboard, unless they're tab-able or something.
  • [22:15] <Hixie> that seems suboptimal
  • [22:18] <TabAtkins> Huh. IE8 & 9 let any element be activated, but only the target of the click gets :active, not everything up the chain.

[52] 選択子3の規定は曖昧さが多く残っていましたが、 HTML の仕様書はこれをより厳密に、 実際の Webブラウザーの挙動に近い形で規定しています。 はじめこれは意図的違反とされていましたが (>>3)、 CSS WG 方面から抗議があって意図的違反では無いような表現に改められています (>>4)。

奇癖モード

[69] 2012年2月には、奇癖モード標準によって奇癖モードでの規定がはじめて仕様化されました >>57。

実装

[1] 2009年5月 - Blog - EOF (Taku Watabe 著, 版) <http://end-of-file.net/blog/2009-05.html#date-2009-05-16>

IE8 と Opera 9.5 以降で :active 疑似クラスは親要素に伝搬しない

不思議解釈

[14] HTML の属性名に引きずられて :alink 擬似クラスが存在すると述べている解説もあります。

関連

[12] :link や :visited や :hover とは互いに排他的ではありません。同時に適用されることもあります。しかし古い実装はそうではないこともあります。

[13] 元々 HTML の alink 属性に相当する機能として CSS に取り入れられたようです。

[56] Quirks Mode Standard ( ( 版)) <http://simon.html5.org/specs/quirks-mode#the-:active-and-:hover-quirk>

[70] IRC logs: freenode / #whatwg / 20121109 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20121109#l-355>

[71] IE10でリンクをクリックした時に背景が青になるのですが、仕様で.. - 人力検索はてな ( ( 版)) <http://q.hatena.ne.jp/1371726896#a1205853>

[74] Web Applications 1.0 r2778 Defined how pseudo-classes match HTML concepts. Redid how rtl/ltr changes are marked. Stopped <legend> centering for <figure>. Removed <multicol> support. Removed <basefont> support. Removed obsolete notes. Fixed minor typos. ( ( 版)) <http://html5.org/r/2778>

[75] csswg: changeset 14820:2539f118cb22 ( ( 版)) <https://dvcs.w3.org/hg/csswg/rev/2539f118cb221178eeeb0e27c377e78b2feeb650>

[76] Web Applications 1.0 r8867 active links should be color:red ( ( 版)) <https://html5.org/r/8867>

[77] csswg: changeset 14966:d176479b88ff ( ( 版)) <https://dvcs.w3.org/hg/csswg/rev/d176479b88ffe2dcfa027be6aee807afc0d45bd2>

[78] Web Applications 1.0 r8873 Match reality better for :active, even though this is suboptimal UI-wise. ( 版) <https://html5.org/r/8873>

[42] Web Applications 1.0 r8875 Fix the definition of :active to not be self-contradictory and to slightly better match reality for buttons. I'll submit a second patch that makes this readable in a second. ( 版) <https://html5.org/r/8875>

[40] Web Applications 1.0 r8877 Reword the :active logic to be at least somewhat readable. ( 版) <https://html5.org/r/8877>

Updated: