http://www.w3.org/TR/CSS21/ui.html#cursor-props
各ブラウザの URI指定(サポートファイル形式)対応状況
Internet Explorer 7 (Win)
URI指定可能 ( .cur ○ / .png × ) ※相対パスは CSS ファイルからではなく本体 HTMLファイルからパスになるバグがある。
Internet Explorer 6 (Win)
URI指定可能 ( .cur ○ / .png × ) ※相対パスは CSS ファイルからではなく本体 HTMLファイルからパスになるバグがある。
Firefox 2.0 - 3.0 (Win)
URI指定可能 ( .cur ○ / .png ○ )
Firefox 2.0 - 3.0 (Mac)
URI指定不可能(Bug に上がっているので対応する予定はある)
Opera 9.5 (Win / Mac)
URI指定不可能 ※url(〜)が含まれている定義は無視されてしまう。
Safari 3.1 (Win / Mac)
URI指定可能 ( .cur ○ / .png ○ )
CSS 定義方法のまとめ
- 「CSS 規格との整合性からも、URI リストを最初に、最後にキーワード値を一つ入れるべきです。」 (http://developer.mozilla.org/ja/docs/Using_URL_values_for_the_cursor_property)
- ファイル形式 .cur にする。
IE のバグに対応するには
のいずれかで対応する。
Opera の問題に対応するには
前の行で特定のカーソル定義をあらかじめしておく。
定義例
――――――――――――――――
+ xxx.html
+ style/
+ xxx.css
+ images/
+ custom.cur
――――――――――――――――
上記のようなファイル配置構成時にカーソルを custom.cur ファイルもしくは使えなければ crosshair にする場合のサンプルです。
.custom-cursor {
cursor: crosshair;
cursor: url(style/images/custom.cur), url(images/custom.cur), crosshair
}