CSS : cursor 属性のブラウザ対応のまとめ

July 9, 2008

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 定義方法のまとめ

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
}

tilfin freelance software engineer