「JamGraffiti - Logs#背景代替が嫌いな個人的理由」を読んでみて思ったこと。いや、思ってたことかも。
これは個人的な感覚なのかもしれないけど、「img要素で画像貼るよりもCSS背景画像で貼る方がカッコイイ」的な信仰は今でも少なからずあると思いますが、それは多くのCSS使いが「CSSが適用されない状態を考慮している」からなのでしょう。オレも昔はCSSを切った瞬間に全てがテキストで表示されることこそがスバラしー事だと思っていた時期がありました。そして「CSSを使用した状態で画像表示を消す」という状態の存在を忘れる。その際、要素に含まれるテキストをCSSで非表示にし、背景画像で代替していると、当然まったく何も表示しないということになります。
しかしそんなものは過去の歴史が「文字としての意味を持つ画像を背景として使用してはならない」と幾度となく言っているは周知の事実で、しかしながらもそのようなトリッキーな手法がいまだに蔓延しているのもひとえに部分的なアクセシビリティにしか注目していないということになります。確かに、「CSS：ON/IMG：OFF」なんて状態はわざと意図してやらない限りそうそう現れない状態ではありますが、オレ理論では数の多少ではなく存在するかしないかという、そういうアレなので。というよりも、自分自身が「CSS：ON/IMG：OFF」なんて状態で普段使っているからなのですが。何のためか、と言われればそれは「他のトコはどんなぶっ壊れ方するのかなヘケケ」という非常に終わってるような理由でしかないんですが、それもまた存在の一つなわけで。
そんなワケで先日貼った「インターネット帳面」のロゴタイプはきっちりimg要素を使用してますが、これは『Gecko』にしか適用していません。Gecko（というか確認したのはFirefoxとMozilla）には alt 属性をコピーできる能力があるのがその理由。またその際hover時にcursorがtextになるようにしておくとさらにカッコイイ（謎）。
とは言っても背景画像の代替がウェブデザインの進化を促したのも事実なのわけで。それに、そんなのぶっちゃけどーだっていいんですよ。画像読み込ませれば済むわけだし。大抵、コピーするときは結局ソース表示してtitleをコピったりしますし。
と言うだけ言って終わるのもアレなのでFirefox限定のワザとして、
<h1 style="background-image:url(orz.gif);">
<span style="-moz-opacity:0;">インターネット帳面</span>
</h1>というような方法もあるね。コピーできるけどコピーできる文字がそこにあるのかどうか肉眼ではわからんので意味はないが。
Powered by Movable Type Version 3.31-ja