脳log[20150323] target疑似クラスと highlight.rbプラグイン

2015年03月23日 (月) 解決指向か共感指向かという分け方「Twitterであっという間に４万シェア！男女の意識差を表した漫画が話題に｜チャンネル「てみた」」■でも男はメンツや理想にこだわる(実より名をとる)面があり、その点女は変わらない日常に根ざしたプラグマティズム(メンツで飯が食えるんか？)があると思う。あとは狩りの場面が出てきたけど、血を見るのに慣れていないのは男か女か、とか。まあつまり、適切な問題を選べば女性の方が有能な場面は容易に想像できるでしょ、と。もちろんそういうのが得意な男もいればその逆もある。

最終更新: 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メソッドにはセクションインデックスが渡っているから、本体(スタイル)で対応(するための準備を)するのは簡単なんだけど。

影響

a要素に name属性と id属性を並記しても CSSで h3要素をハイライトできない。
h3タグないし div.sectionタグに id属性をふると CSSでハイライトできるが、ハッシュターゲットが id属性に基づくか name属性に基づくかでブラウザの対応が割れる。id属性に基づく場合はこれまでと異なる表示のされ方をするということ。
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疑似クラスが一番近いんだけど、リンクに対してボタンを押し下げただけで反応してクリックが成立したときに解除されてるんじゃあ早すぎるし、キーボードに対する反応が不明。

脳log[20150323] target疑似クラスと highlight.rbプラグイン

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

影響

そうだ、本題

See also...