* [CODE(CSS)@en[:focus]] 擬似クラス [12] [DFN[[CODE(CSS)@en[[[:focus]]]]]] [[擬似クラス]]は、[[焦点]]を持っている[[要素]]に適用されます [SRC[>>11]]。 ** 仕様書 [REFS[ - [11] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) ]REFS] ** 意味 [13] [CODE(CSS)@en[[[:focus]]]] は[[焦点]]を持っている[[要素]]に適用されます。 [[焦点]]を持っている[[要素]]は、[[鍵盤事象]]や[[マウス事象]]、その他の入力を受け付けます。 [SRC[>>11]] [14] [[文書言語]]や[[実装]]はどの[[要素]]に [CODE(CSS)@en[[[:focus]]]] が適用されるかを制限するかもしれません。 [SRC[>>11]] ** 歴史 *** CSS2 [REFS[ - [26] [CITE@en[Selectors]] ([TIME[1998-03-25 23:00:31 +09:00]] 版) - [15] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) ]REFS] [16] [CODE(CSS)@en[[[:focus]]]] は >>26 で追加されました。 *** CSS UI [17] 古い [[CSS UI]] の仕様は [CODE(CSS)@en['[[user-input]]: enabled']] な[[要素]]にだけ [CODE(CSS)@en[[[:focus]]]] が適用される、と改訂していましたが、この仕様は放棄されて現在に引き継がれていないようです。 >>25 の次の [[CR]] で削除されています。 [REFS[ - [18] [CITE[User Interface Enhancements]] ([TIME[1999-09-16 05:07:02 +09:00]] 版) - [19] [CITE@en[User Interface for CSS3]] ([TIME[2000-06-23 03:09:21 +09:00]] 版) - [22] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2000-04-11 01:57:05 +09:00]] 版) - [24] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2000-10-06 02:05:50 +09:00]] 版) - [25] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2001-01-29 23:57:00 +09:00]] 版) ]REFS] [28] その後は単に[[選択子3]]を参照するだけになっています。 [REFS[ - [29] [CITE@en[CSS Basic User Interface Module Level 3 (CSS3 UI)]] ([[Tantek Çelik]] 著, [TIME[2012-01-13 20:03:30 +09:00]] 版) ]REFS] [23] [[Web Controls 1.0]] は [[CSS UI]] を更に拡張して[[Webアプリケーション]]が状態を制御できるようにする構想を持っていました。 [REFS[ - [21] [CITE@en-GB-hixie[Web Applications Markup Language 1.0]] ( ([TIME[2004-04-08 02:39:12 +09:00]] 版)) - [20] [CITE@en-GB-hixie[Web Controls 1.0]] ( ([TIME[2004-11-09 08:49:52 +09:00]] 版)) ]REFS] * 歴史 ** 焦点 (HTML4) [1] [Q[HTML 文書では、[[要素]]は活性化してその仕事を行うために利用者から[DFN[焦点]]を受取らなければなりません。例えば、利用者は [CODE(HTMLe)[[[a]]]] 要素で指定されたリンクをたどるためにリンクを活性化しなければなりません。同様に、利用者は文章を入力するためには [CODE(HTMLe)[[[textarea]]]] に焦点を与えなければなりません。]] というのが HTML における[DFN[[RUBYB[焦点] [focus]]]]です。 フォームの章で規定されており、フォーム[[制御子]]に関して特に重要な意味を持ちますが、 [CODE(HTMLe)[a]] 要素が例に挙げられている通り、フォーム特有の概念ではないようです。 [REFS[ - [2] [[HTML 4]] -- [CITE[17.11 focusGiving focus to an element]] ]REFS] [3] 要素に焦点を与える方法は幾つもあります [SRC[HTML 4]]。 - 指示装置で要素を指定する。 - 鍵盤である要素から次の要素に移動する。 -- 著者は、[DFN[タブ順]] (要素が焦点を受取る順) を指定できる ([CODE(HTMLa)[[[tabindex]]]])。 -- 要素は、ひとたび選択されれば、何か他の打鍵で活性化できるかもしれない。 - アクセス鍵 ([CODE(HTMLa)[[[accesskey]]]]) によって要素を選択する。 -- [Q[鍵盤近道]]とか[Q[鍵盤アクセス子]]とか言うこともある。 仕様書にはちゃんと書いてありませんが、当然、 どのような方法が利用可能であるかや、具体的にどう操作するかは、 その UA や使用する環境その他に大きく左右されることになります。 特に、多くの利用者界面システムは元々[Q[焦点]]のような概念を持っていますから、 普通 UA はその概念の元で表示した HTML 文書を操作できるようにしています。 [4] HTML 4 仕様書は[Q[[RUBYB[活性化] [activate]]]]と[Q[[RUBYB[焦点] [focus]]]]についての概念が少々混乱しているように見受けられます。 [Q[焦点]]は 17.11 節で [Q[an element must receive [DFN[focus]] from the user in order to become active and perform its tasks]] と定義されています。つまり、焦点を受取ると要素は活性になり、 定められた仕事を行います。 それでは焦点を受取ることと活性化が実際上同じなのかと思うと、 次の 17.11.1 節の[Q[[RUBYB[タブ順序] [tabbing order]]]]と矛盾します。 [Q[The tabbing order defines the order in which elements will receive focus when navigated by the user via the keyboard.]] ですから、タブ移動は焦点移動です。 しかし、 [Q[users must activate a link specified by the [CODE(HTMLe)[A]] element in order to follow the specified link]] ですから、焦点受領と活性化が同じことであるなら、 リンクにタブ移動すると他の頁に飛ばされてしまいます。そのような解釈は不適切でしょう。 また、 Note として、 [Q[The actual key sequence that causes tabbing navigation or element activation depends on the configuration of the user agent (e.g., the "tab" key is used for navigation and the "enter" key is used to activate a selected element).]] とあります。どうやら、[Q[タブ navigation]] と[Q[要素活性化]]の2つの操作があるようです。 [Q[タブ順序]]の定義より、前者が焦点を受取ることと解するのが自然でしょう。 また、 [Q[tabbing navigation]] の結果要素は[Q[選択]]されるようです。 17.11 節にも、タブで要素を選択してから活性化するというようなことが同じような感じで書かれています。 ここまでで、どうやら少なくてもタブ移動に関しては、焦点の移動と活性化は別の操作であり、 焦点を受取る (選択する) と活性化できるらしいことが分かりました (最初の定義に少々疑問が残りますが)。では、更に読み進めて、 17.11.2 節 ([CODE(HTMLa)[accesskey]]) をみてみましょう。 > Pressing an access key assigned to an element gives focus to the element. The action that occurs when an element receives focus depends on the element. For example, when a user activates a link defined by the [CODE(HTMLe)[A]] element, the user agent generally follows the link. When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc. [Q[アクセス鍵を押すと要素は焦点を受取ります。焦点を受取った際の挙動は要素依存です。]] ここまで最初の2文は何ら問題ありません。ところが、次の [Q[For example]] 以降が、なぜか突然活性化の話題になっています。 ここに書かれえているラジオ・ボタンや文章入力の挙動は焦点を受取った時の挙動として実装しても問題はなさそうですが、 リンクを飛んでしまうのは困ります。 更に、次の段落では例を挙げつつ [Q[Typing the access key gives focus to the label which in turn gives it to the associated control. The user may then enter text into the [CODE(HTMLe)[INPUT]] area.]] と言っています。仕様書著者の脳内 UA では、 文章入力欄が焦点を受取ると既に利用者が入力可能な状態になっているようです。 また、その次の [CODE(HTMLe)[a]] 要素の例では、 [Q[Typing this access key takes the user to another document]] とされています。ここでも、アクセス鍵を打鍵しただけでリンクは活性化して飛んでいくようです。 というわけで、どうやら、[Q[焦点を受取る]] ([Q[要素を選択する]]) ことと[Q[活性化する]]ことは、同時に起こることもあれば別々に起こることもある、 とでもまとめるしかなさそうです。 [5] 実際の UA は、 [CODE(HTMLe)[a]] によるリンクや押しボタン制御子に関連付けられたアクセス鍵を打鍵した時に焦点を受取るだけのものもあれば、 活性化してしまうものもあります。そのような実装の違いも、 仕様書の分かりにくい記述のせいかもしれません。 (あるいは仕様書が混乱しているのは当時の実装のせいかもしれません。) [6] [Q[活性]]というのが既存の GUI システム類で[Q[焦点]]に近い意味でも使われているのも混乱の原因かも。 ** 属性集合 [CODE(XML)[%focus;]] (XHTML 1.0) [7] [[XHTML 1.0]] では[[焦点]]を得られる[[要素]]の[[焦点]]に関する[[属性]]を[[引数実体]] [DFN[[CODE(XML)[%focus;]]]] で定義しています。 [REFS[ - [8] [[XHTML 1.0]] -- [CSECTION[A.1.1. XHTML-1.0-Strict]] -- [CSECTION[A.1.2. XHTML-1.0-Transitional]] -- [CSECTION[A.1.3. XHTML-1.0-Frameset]] ]REFS] [9] ,属性名,属性値,既定値,説明,状態,出典 ,[CODE(HTMLa)[[[accesskey]]]],[CODE(XML)[%[[Character]];]],,,W3C 勧告,[XHTML 1.0] ,[CODE(HTMLa)[[[onblur]]]],[CODE(XML)[%[[Script]];]],,焦点喪失時,W3C 勧告,[XHTML 1.0] ,[CODE(HTMLa)[[[onfocus]]]],[CODE(XML)[%[[Script]];]],,焦点受領時,W3C 勧告,[XHTML 1.0] ,[CODE(HTMLa)[[[tabindex]]]],[CODE(XML)[%[[Number]];]],,[[タブ付け順序]],W3C 勧告,[XHTML 1.0] * メモ [10] [CITE@en[Web Applications 1.0 r5911 Define when the platform-specific focusing behavior happens relative to focus events, etc.]] ( ([TIME[2011-02-19 09:26:00 +09:00]] 版)) [27] [CITE@en[Web Applications 1.0 r6876 Clarify what is focused in the iframe's owner document when an iframe's child document is focused.]] ( ([TIME[2011-12-17 05:53:00 +09:00]] 版)) [30] [CITE@en[Web Applications 1.0 r7458 Make UA-provided focusable controls that are part of other elements be focusable.]] ( ([TIME[2012-10-13 03:03:00 +09:00]] 版)) [31] [CITE@en[Web Applications 1.0 r7459 Allow even more flexibility in deciding what's focusable.]] ( ([TIME[2012-10-13 03:05:00 +09:00]] 版)) [32] [CITE@en[Web Applications 1.0 r7498 Another attempt at defining tabindex, :disabled, what can be focused, etc.]] ( ([TIME[2012-11-02 08:07:00 +09:00]] 版)) [33] [CITE@en[WICD Core 1.0]] ( ([TIME[2010-08-17 16:51:00 +09:00]] 版)) [34] [CITE@en[WICD Mobile 1.0]] ( ([TIME[2010-08-17 16:50:39 +09:00]] 版)) [35] [CITE[''''''[''''''whatwg'''''']'''''' Should scrollbars move focus?]] ( ([TIME[2012-12-29 16:15:33 +09:00]] 版)) [36] [CITE@en-US[XBL 2.0]] ( ([TIME[2012-05-03 02:23:03 +09:00]] 版)) [37] [CITE@en[Web Applications 1.0 r8323 Make the fragment identifier handling rules match browsers better]] ( ([TIME[2013-12-03 08:55:00 +09:00]] 版)) [38] [CITE[IRC logs: freenode / #whatwg / 20131209]] ( ([TIME[2013-12-10 20:49:20 +09:00]] 版)) [39] [CITE@en[Bug 23475 – : Clarify how elements can be given "window focus"]] ( ([TIME[2013-12-14 10:07:54 +09:00]] 版)) [40] [CITE@en[Web Applications 1.0 r8338 Make autofocus the first focusable control if there isn't one with autofocus=''.]] ( ([TIME[2013-12-11 07:09:00 +09:00]] 版))