月別アーカイブ 2006年10月

前後の月

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

この記事が属するカテゴリー
CSS

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

そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target | HTML Dog の JavaScript を利用している。（Opera はダメっぽい、教えてエロイ人！）

<p>文章…<a href="#">アンカー</a>…</p>
<ol>
<li>脚注内容</li>
</ol>

とりあえず、普通にハイライト表示させるだけでも、どこに飛んだのか分かりやすくなる。

ハイライトさせるだけではつまらないんで、ol 要素でマークアップした脚注内容を非表示にしておき、脚注へのリンクをクリックすることで、脚注がウィンドウ内右上に表示させるようにしてみた。表示した脚注を閉じるには、脚注内の[脚注元へ]をクリック。

/* 脚注を非表示 */
ol.note li {
  display: none;
}

/* ターゲットされた際に画面右上に表示 */
ol.note li:target {
  border: 3px dotted #888;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  width: 15em;
  background-color: #f0fff0;
}

これをもとにユーザースタイルシート作って「はてなダイアリー」とかの脚注をコントロールしちゃうぞーとか思ったら、はてなの場合は、ターゲットとなる要素が脚注自体ではなく、脚注番号だった。もう全然無理。

2006-10-29T00:42:59+09:00 | コメント (5) | トラックバック (2) |はてなブックマーク

使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite

この記事が属するカテゴリー
CSS

タイトル長っ！ まぁ、そのまんまなのだけれども、今使用しているブラウザが、CSSのセレクタ（CSS3も含む）にどれくらい対応しているかチェックできる CSS Selectors testsuite - CSS3 . info が便利っぽい。

CSS-Selectors-testsuite

Start testing... をクリックでチェックが開始され、各セレクタの結果が緑色であれば対応、赤色であれば未対応ってな寸法。ただ、ひとつのセレクタに複数のテストを行うんで、そのうちのひとつでも引っかかると failed になっちゃう。

未対応の例

上記画面は、IE7 RC1 でのチェック結果だけど、対応しているはずの属性セレクタで failed となる。セレクタ名の部分をクリックすると、どういったテストが行われて、結果がどうなっているのかソースを確認できるんだけど、どうやら属性が空の場合や属性の記述が不完全の場に、IE7 はうまくパースできないみたい。ちなみに Firefox だと問題ない。

ってな感じで、セレクタの対応表みたいなんをいちいち見るよりも細かいことが分かるんで、これは素晴らしいデス。

2006-10-11T00:10:36+09:00 | コメント (0) | トラックバック (4) |はてなブックマーク