CSS 3 セレクタを使わなかった場合のソース

昨日の記事（「CSS 3 セレクタ最終草案リリース」）で紹介した CSS 3 属性セレクタのサンプルですが、同様のことをクロスブラウザでアクセシブルにするにはどうすればいいかという点と、その場合の(X)HTML ソースがどれだけ冗長になるかという点が抜けてましたので以下に追記しておきます。

CSS 3 セレクタ使用時

対応ブラウザ: （CSS Level 3）

<ul>

<li><a href="http://my-chunqiu.cocolog-nifty.com/blog/2005/12/csstarget__a2ca.html">サイト内へのリンク</a></li>
<li><a href="http://www.google.com">サイト外へのリンク</a></li>
<li><a href="mailto:foo@bar.baz">メールアドレスへのリンク（ダミー）</a></li>
<li><a href="dummy.pdf">PDF ファイルへのリンク（ダミー）</a></li>
<li><a href="dummy.doc">MS Word ファイルへのリンク（ダミー）</a></li>
<li><a href="dummy.xls">MS Excel ファイルへのリンク（ダミー）</a></li>
<li><a href="dummy.txt">テキストファイルへのリンク（ダミー）</a></li>

</ul>

ソースが簡素でみやすい上に、間違いが起こりにくい。そもそも編集・メンテ時にリンク対象をまったく意識する必要がないのが素敵です！CSS ソースは 2005-12-23 の記事を参照。

class + background-image を利用する

対応ブラウザ: （CSS Level 1）

<ul>

<li><a href="http://my-chunqiu.cocolog-nifty.com/blog/2005/12/csstarget__a2ca.html" class="local">サイト内へのリンク</a></li>
<li><a href="http://www.google.com" class="www">サイト外へのリンク</a></li>
<li><a href="mailto:foo@bar.baz" class="mail">メールアドレスへのリンク（ダミー）</a></li>
<li><a href="dummy.pdf" class="local pdf">PDF ファイルへのリンク（ダミー）</a></li>
<li><a href="dummy.doc" class="local word">MS Word ファイルへのリンク（ダミー）</a></li>
<li><a href="dummy.xls" class="local excel">MS Excel ファイルへのリンク（ダミー）</a></li>
<li><a href="dummy.txt" class="local text">テキストファイルへのリンク（ダミー）</a></li>

</ul>

Perl や PHP などで動的に HTML を吐き出してる場合は、ある程度、自動化できるものの、手打ちなど静的な HTML だと class のつけ間違いやつけ漏れが起こりやすい。

CSS としては a.local:after { content: url('http://my-chunqiu.cocolog-nifty.com/images/link2local.png'); } のように指定することもできますが、これだと IE 6 以前が :after 擬似要素に対応していないので、クロスブラウザ対応にするためには background-image を利用します。（たたし Netscape 4.7 には background-image をインライン要素に適用すると前後が改行されてしまうバグがあります。）

「ローカルで且つ PDF ファイル」であるという条件を同時に指定したい場合は、上のように複数の class をタブ区切りで同時指定することもできます。この時、CSS 上でスタイルが衝突する場合は、後で指定した class の方が優先されます。

img 要素を利用する（CSS を使わない）

対応ブラウザ: （No CSS）

<ul>

<li><a href="http://my-chunqiu.cocolog-nifty.com/blog/2005/12/csstarget__a2ca.html">サイト内へのリンク<img src="http://my-chunqiu.cocolog-nifty.com/images/link2local.png" alt="サイト内へのリンク"/></a></li>
<li><a href="http://www.google.com">サイト外へのリンク<img src="http://my-chunqiu.cocolog-nifty.com/images/link2www.png" alt="サイト外へのリンク"/></a></li>
<li><a href="mailto:foo@bar.baz">メールアドレスへのリンク（ダミー）<img src="http://my-chunqiu.cocolog-nifty.com/images/link2email.png" alt="メールアドレスへのリンク"/></a></li>
<li><a href="dummy.pdf">PDF ファイルへのリンク（ダミー）<img src="http://my-chunqiu.cocolog-nifty.com/images/file-pdf.png" alt="PDF ファイルへのリンク"/></a></li>
<li><a href="dummy.doc">MS Word ファイルへのリンク（ダミー）<img src="http://my-chunqiu.cocolog-nifty.com/images/file-word.png" alt="MS Word ファイルへのリンク"/></a></li>
<li><a href="dummy.xls">MS Excel ファイルへのリンク（ダミー）<img src="http://my-chunqiu.cocolog-nifty.com/images/file-excel.png" alt="MS Excel ファイルへのリンク"/></a></li>
<li><a href="dummy.txt">テキストファイルへのリンク（ダミー）<img src="http://my-chunqiu.cocolog-nifty.com/images/file-text.png" alt="テキストファイルへのリンク"/></a></li>

</ul>

見ての通り、すごく冗長で見にくい。要点がどこにあるのかが一目ではわかりません。しかもいちいち画像を埋め込むためのタグを入れなくてはならないので、間違いが起こりやすいのも難点です。