Fahrner Image Replacement hacks

Fahrner Image Replacementという、ロゴに画像を使用しつつ、CSSが切られていたりCSS非対応なブラウザには相応のテキストを表示するCSSテクニックがあるんです。img要素のalt属性使えばいいじゃんとかそういうのはまぁ置いておいて(一応、上記URLで触れられているので、そちら参照)。コンセプト的にはかなりツボなのですが、このテクニックはあんまり意味のないマークアップを施さなきゃならない上に、このままではロゴにリンクを張るのは難しい(display:hidden;なのでポイントできない)、さらにはA List Apartでアクセシブルっぽく見えて実際にはアクセシブルじゃないよとかつっこまれているので、ちょっとどうかなとか思っていたのですが、うまいこと追加マークアップ無しで実現できたので、このテクニックを応用したものをタイトル・ロゴに導入してみました。

まずはCSSのコード。

h1 {
  border-top:1px solid rgb(51, 51, 51);
  border-right:1px solid rgb(51, 51, 51);
  border-left:1px solid rgb(51, 51, 51);
  color:rgb(51, 51, 51);
  background-color:rgb(186, 192, 195);
  background-image:url("../images/titlelogo.png");
  background-position:4px 50%;
  background-repeat:no-repeat;
}

h1 a:link, h1 a:visited, h1 a:active, h1 a:hover {
  display:block;
  width:auto;
  height:42px;
  color:inherit;
  background-color:transparent;
  text-indent:-1000px;
  text-decoration:none;
}

h1要素に、ロゴに使う画像を背景画像として指定しておきます。次に、子孫セレクタを利用して、テキストを表示させないようにがんばってます。キモはtext-indentで、これに大きめの負の値を入れてやることによって、テキストを見えないところにすっ飛ばしてやってます(See Also: Accessible Image Replacement)。これだけだとh1要素の大きさが不定になるので、h1要素の大きさを確保してやれば完成。displayとwidth、heightがそのための指定です。

Validで、適度にクロス・ブラウザ(Internet Explorer 6、Mozilla 1.6、Opera 7だけですが)で、適度にアクセシブルなので自己満足度は高いテクニックになりました。微妙にくだらないけど。

ちなみに、タイトル・ロゴの画像に使用したフォントは、Zurich Light Extra Condensed BTLinotype Aroma Semiboldです。かなり好き。