Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する

文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |

[ku_marin]

脚注を動的に表示する

[webmarksjp]

css

[s-e-i]

よくある脚注がこんなかんじに動けばいいなあ

[kurobuchi]

サポートされているブラウザが少ないが，便利．

[lomo_lomo]

脚注へのリンクをクリックすると脚注がウィンドウ内右上に表示

[miya2000]

Operaでは認識しない擬似クラスのCSSは全て無視される(エラーになってる)みたいですね。って、既にトラックバック先で解決されてる。

[AmaiSaeta]

……あ、でもCSS3ってまだ勧告になって無いなぁ。勧告になってtarget消えてなかったら実装しようか。

[sunaoka]

脚注をハイライトさせる

[designstalker]

アンカーによるページ内移動を分かりやすくする工夫。現時点で IE は非対応だが、JavaScript を使用した代替案あり。

[wacky]

アンカーのリンク先となる要素のスタイルを指定するための:target疑似クラスについて。IE向けのJavaScriptによる回避サンプルもあり。