昨日、cssハックについて書くと宣言したが、気が変わった。

cssハックについては、またの機会に。

以前、「“空白文字”をめぐる紆余曲折」の記事の中で、Another HTML-lint gatewayをご紹介したと思う。

Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

これでなるべくエラーの出ないようにサイト作成することを心がけていたのだが、このサイトのトップページに関してvalidationしてみたところ、10/24の「jQueryを導入してみた。」の記事内でスタイルシートを切り替えるためのソース

<dl id="style">
  <dt>style</dt>
  <dd><a href="javascript:void(0);" onclick="switchCss('nonukes1'); return false;">pop</a></dd>
  <dd><a href="javascript:void(0);" onclick="switchCss('nonukes2'); return false;">cool</a></dd>
  <dd><a href="javascript:void(0);" onclick="switchCss('nonukes3'); return false;">normal</a></dd>
</dl>

これが軽く引っかかった。

<a> の href 属性の URI に指定されているスキーム `javascript` の利用は薦められていません。

URIに"javascript"を使うのは、利用者がスクリプトを使わない環境のときなどのことを考えて、使用を慎むように、アクセス指針技術文書4.12.1(J)に書かれています。しかし、実際には必ずしも制限される必要のない javascript スキームも少なからず存在します。例えば、javascript が動作すれば恩恵を被るものの、動作しなくてもなんら支障のないような場合などです。この警告は減点されません。

まあ、減点されないし良しとするか、とも考えていたのだが、やっぱりせめてトップページくらいは一切警告されないようにしたいなという欲が出てきた。

だから、警告されないよう少し変更。

要は、“<a href="javascript:void(0)~”の部分が引っ掛かっているワケで、“onclick=~”以降はOKなワケだ。

ちなみに、“javascript:void(0)”の働きについては、以下のサイトが分かりやすい。

javascript:void(0)について
http://d.hatena.ne.jp/chaichanPaPa/20080212/1202817741

したがって、<dd>に直接“onclick=~”を記述することに。

<dl id="style">
  <dt>style</dt>
  <dd onclick="switchCss('nonukes1'); return false;" onkeypress="switchCss('nonukes1'); return false;">pop</dd>
  <dd onclick="switchCss('nonukes2'); return false;" onkeypress="switchCss('nonukes2'); return false;">cool</dd>
  <dd onclick="switchCss('nonukes3'); return false;" onkeypress="switchCss('nonukes3'); return false;">normal</dd>
</dl>

ただこれだけだと、“pop”などの文字がそのまま本文と同じ書体となり、リンクっぽさがないので、cssに以下のように追記して対処した。

#style dd {
  color: #0000FF;
  text-decoration: none;
  cursor: pointer;
}

#style dd:hover {
  text-decoration: underline;
}

これで一切の警告が出ず、100点満点。

嬉し。

寝よ。