最終更新: 2015-04-04T00:49+0900
CSS3のセレクタ一覧を眺めていたら target疑似クラスを見つけた。:targetがマッチするのは URLのフラグメントに一致する id属性値を持つ要素。これって highlight.rbプラグインが JavaScriptで探してる要素なんじゃないの? プラグインは titleタグの中身を書き換えたりもしてるから highlight.rbが全く不要にはならないけど、NoScriptでスクリプトを切ってる俺にはスクリプトが無効なときのフォールバックがあって困ることはない。
ブラウザの実装状況はこんな感じ>:target - CSS | MDN
base.cssの該当するスタイルにセレクタを追加するだけ
.highlight, :target { }
……と思ったのだが、HTMLに問題が。
<h3><a name="p01" href="..." title="..."><span class="sanchor">_</span></a>サブタイトル/セクションタイトル</h3>
name属性と id属性を並記していないし、その対象が h3でなく aだし。残念だ……残念だ……。
XPathでは不可能ではないけど、CSSでは親を条件に子や子孫を選ぶことはできてもその逆ができないのだよね(すくなくとも俺には見つけられなかった)。wiki.rbの do_html4メソッドにはセクションインデックスが渡っているから、本体(スタイル)で対応(するための準備を)するのは簡単なんだけど。
2番目が一番害がなさそうに見えて、俺が一番困ってしまった手段。というのも、ターゲットとなる a要素を h3要素の上に突き抜けさせることで、h3要素が画面の上端に張りつかないようにしていたから。ターゲットを横取りされた場合に同じようにマージンを取る方法は見つからなかった。今うまくいってる方法がどういう仕組みなのかもわからないのだから難しい。
div.section > h3 > a[name] { padding-top: 3em; }
1の手段をとりつつ CSS4のセレクタを待つというのが最も保守的な選択。俺は 2番で div.sectionをターゲットにすることでそこそこのマージンを確保して良しとした。つまりこう
def html4( date, idx, opt ) r = %Q[<div id="p%02d" class="section">\n] % idx r << %Q[<%=section_enter_proc( Time::at( #{date.to_i} ) )%>\n] r << do_html4( date, idx, opt ) r << %Q[<%=section_leave_proc( Time::at( #{date.to_i} ) )%>\n] r << "</div>\n" end
.highlight, :target > h3 { background-color: #ffff66; }
探していたのは :targetじゃなくて、でも :activeでもないんだよな。
リンクをクリックしてからページが切り替わるまでの
スクリプトだとたぶん beforeunloadが呼ばれたあと。でもこれしきスクリプトの仕事とは思わない。:active疑似クラスが一番近いんだけど、リンクに対してボタンを押し下げただけで反応してクリックが成立したときに解除されてるんじゃあ早すぎるし、キーボードに対する反応が不明。