hail2u.net

CSS Image Replacement Hacks

Posted at 2005-03-15T22:01:00+09:00 in Web Design

元祖とも言えるFahrner Image Replacementやtext-indentによるものをはじめとして、多くのCSSによる画像置換テクニックは、CSS On/画像 Offという環境において問題を抱えています。このサイトではその問題から目を逸らしていたわけですが、今回のリニューアルにともないどうにか解決出来そうな感じだったので、チャレンジしてみました。

考え方としては文字列を消すのではなく隠すというアプローチ、つまり、置換する画像の背景色と置換される文字列の前景色を同じ色にし、ビジュアル的に隠す(実際には見辛いという表現が適切)という方法を取りました。これならば上記のCSS On/画像 Offという環境でも問題なく文字列が表示されることになります。また、FirefoxやInternet Explorerなどでウェブページに設定された前景色や背景色を利用しないオプションを有効にしてブラウザされている場合でも、背景画像はロードされずブラウザ側で設定した背景色で塗り潰されるので問題無い感じ。

とか、チャレンジしてみた割りには、結局のところimg要素にきちんとalt属性を指定して利用するのが最も良さそうとかいう結論になってたりして。つまり、無駄にCSSでゴニョゴニョしすぎということ。