CSSでIEに疑似要素を指定する時の注意点
classの擬似要素は理解できないIE
リニューアルに伴い、画像の拡大表示に「Fancybox」を利用する事にしましたが、拡大させたい画像にマウスカーソルを持っていっても、通常のリンクなのでマウスカーソルは「pointer（マウスオーバーさせるとpointerに変わります）」になり、拡大されるのかそうじゃないのか判断ができません。
ということで、FancyBoxで拡大する画像には、よくある虫眼鏡的なズームカーソルを表示させることにしたのですが、IE 8をはじめとする、全てのIEに適用させるために苦労したのでそのメモです。
とりあえず、CSSでIEに画像カーソルを表示させるには「.cur」というMacユーザーにはなじみの薄い拡張子の画像にしなければならないという事で、いろいろ検索。残念ながらMacでcurファイルの作り方がわからなかったので、Windowsマシンをちょこっとお借りして「I・C コンバータ」というフリーウェアで作成。後はスタイルシートを以下のようにしました。
IEは相対パスで画像を参照する事があるとの記述をどこかで見た気がするので、念のため絶対パスで記述しています。
以上でSafari、Firefoxなどでは指定した画像をカーソルとして表示してくれるのですが、IE 8では「pointer」のままです。色々調べると、IEはclass指定をしたアンカータグのhover疑似要素を理解していない事が判明しました。
ということで、IE専用のスタイルシートは以下のように修正。
「fancybox」とクラス指定されたアンカータグの中の画像にマウスオーバーした時、指定したカーソルで表示するようにした訳です。なんだかパズルみたいですが、物事の見方を変えるって大事ですね。
画像を指定する場合の注意点ですが、何らかの理由で画像が表示できない事態に備えて、最後に標準で用意されている値を指定した方が無難です。フォントの指定と同じような考え方ですね。標準の値の中でも一番目的にあったものを指定すればいい訳ですが、今回は結局「pointer」を指定しました。
ちなみにSafariとFirefoxはそれぞれ独自拡張のズームカーソルがあるので、通常のスタイルシートはこれだけで済みます。
昔はW3C信者だったので、独自拡張タグの使用には抵抗があったのですが、歳をとると人間丸くなるものです。というか苦労したくない。ということで、きっと画像を読み込むより反応もいいはずですし、ありがたく独自拡張を利用しています。
しかしIE 8は6や7に比べるとほんとに楽に調整できますね。この一件以外、IE 8向けの調整は特にしていません。一刻も早く、7以下のIEは世の中から消えて欲しいものです。全てのIEが無くなってくれてもいいんですけどね。
追記：
現在はこんなめんどくさいことせず、普通に「cursor」を指定すればほぼ全てのブラウザで任意のカーソルを表示させることができますし、classに指定した擬似要素も理解してくれます。
