脳log[2015-03-23～]

最終更新: 2015-04-04T00:49+0900

♪ [tDiary] target疑似クラスと highlight.rbプラグイン

CSS3のセレクタ一覧を眺めていたら target疑似クラスを見つけた。:targetがマッチするのは URLのフラグメントに一致する id属性値を持つ要素。これって highlight.rbプラグインが JavaScriptで探してる要素なんじゃないの？ プラグインは titleタグの中身を書き換えたりもしてるから highlight.rbが全く不要にはならないけど、NoScriptでスクリプトを切ってる俺にはスクリプトが無効なときのフォールバックがあって困ることはない。

ハイライトプラグイン>.rb, .js

ブラウザの実装状況はこんな感じ>: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メソッドにはセクションインデックスが渡っているから、本体(スタイル)で対応(するための準備を)するのは簡単なんだけど。

 影響

1. a要素に name属性と id属性を並記しても CSSで h3要素をハイライトできない。
2. h3タグないし div.sectionタグに id属性をふると CSSでハイライトできるが、ハッシュターゲットが id属性に基づくか name属性に基づくかでブラウザの対応が割れる。id属性に基づく場合はこれまでと異なる表示のされ方をするということ。
3. a要素を h3タグの前に出せば並記しつつハイライトもできるが、テーマがついてこれない。

２番目が一番害がなさそうに見えて、俺が一番困ってしまった手段。というのも、ターゲットとなる 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でもないんだよな。

リンクをクリックしてからページが切り替わるまでの間(ま)。Firefoxでいうとタブバーのタブ部分でロードアイコンがぐるぐるして接続中...と表示されてるあいだに、フォーカス付近に視覚フィードバックが欲しいと思ったのだった。でないと２回３回とクリックされちゃうよね。このサイト遅いからね。最初からダブルクリックを狙われていたらどうしようもないけど。

スクリプトだとたぶん beforeunloadが呼ばれたあと。でもこれしきスクリプトの仕事とは思わない。:active疑似クラスが一番近いんだけど、リンクに対してボタンを押し下げただけで反応してクリックが成立したときに解除されてるんじゃあ早すぎるし、キーボードに対する反応が不明。