冬言響 / 日記

Firefox3.5 の CSS 周りで気になる部分が

まず、なんぞアンカーテキストがある。

<a href="foo.html">text</a>

んで CSS で :after 疑似要素に content プロパティで画像を指定してテキストの後に生成する。

a:after {
    content: url("/img/profile.jpg");
    }

この生成された物体は、元の a 要素と同様にアンカーテキストとして振る舞う、らしい。

さらに、:hover 疑似クラスも使って、a 要素にマウスオーバーした場合は別の画像を出力するようにしてみる。

 {
    content: url("/img/profile_takano.jpg");
    }

アンカーテキストにマウスオーバーすると、a 要素のあとに profile_takano.jpg が出力される。同時に、a:hover:after への content プロパティが a:after へのそれを上書きするので(ってことで良いと思うんだが)、先に出力されていた profile.jpg は消える。つまりはロールオーバーというやつになる。

生成された物体はアンカーテキストとして振る舞うので、この画像にマウスオーバーしてもやはり profile.jpg が消えて profile_takano.jpg に置き換わる。クリックすれば href 属性で示された URI に飛ぶ。手元の Safari4 でも Opera9 でも、またたぶん Firefox3 でもそんな具合の挙動だった。

んが、Firefox3.5 にしてからだと思うのだが、ちと勝手の違う現象が発生した。まず、テキスト部分にマウスオーバーした場合は、ちゃんと画像が入れ替わる。クリックすればちゃんとアンカーテキストとして働く。が、テキストを避けて直接画像の上にマウスカーソルを持って行くと、画像が入れ替わらない??a:hover:after に対する content プロパティが有効にならない(ってことだと思う自信無し)。画像の下にアンカーテキストのアンダーラインが来てるが、これにマウスオーバーした場合はテキストへの場合と同様にちゃんと画像が入れ替わる。画像が入れ替わった状態から、そのままその画像の上へマウスカーソルを移動させても、状態は維持される。画像が入れ替わった場合もそうでない場合もカーソルはマウスオーバー時の指先カーソルになる。のだけど、後者の場合クリックしてもリンク先に飛ばず、カーソルが通常の矢印になる。この状態でもう一度クリックすると、飛ぶ。

youtube をこーゆー風に使って良いのかどうか良く判らんけど動画に撮って載せてみた。Opera9 でもだいたい Safari4 と同じ挙動だった。画像の下にアンダーラインが表示されなかったぐらい。

で。ウチのナビゲーションリンクは現在、前述のようなことをやって生成した画像を元のテキストの上からかぶせることで、

• CSS だけでテキストをアイコン画像に置き換えたい。
• 疑似要素とか content プロパティに非対応な環境や画像非表示環境での閲覧に支障を出したくない。

という 2 つの俺要望を満たし、かつロールオーバーで画像を入れ替えるというインタラクティブなレスポンスをビジターにフィードバックするナウでヤングな仕様となっているのだけど(自分で何言ってんのか良く判らんので突っ込み禁止)、Firefox を 3.5 にしたら画像部分はロールオーバーしないしクリックしてもリンク先に飛ばないので、ナビゲーションリンクとしての用を為さない具合になってしまって困った困ったという今日この頃。

仕様的に正しい挙動はどっちなんだとかは良く判らんのだが、これが Firefox の一時的なアレでちょっと放っとけばマイナーアップデートで解決されるなら放っとくのだけど、長引くようであればどうにかせにゃなあ、と。なんせナビゲーションだし。:hover 周りの指定をやめちゃえば大丈夫ぽいのだが。

ちなみに「いらんことせんとテキストだけで表示しときゃええがん」てのが正解なのは重々承知してるのだけど、ちと画像置換云々に拘りたいのでそこら辺はそーゆーアレをアレがアレってことでアレしといてください意味不明。